Datetime picker formfield - A Flutter widget that wraps a TextFormField and integrates the date and/or time picker dialogs.

Related tags

Calendar datetime_picker_formfield
Overview

DateTimeField

A TextFormField that emits DateTimes and helps show Material, Cupertino, and other style picker dialogs.

Example

See the example tab (example/lib/main.dart) for more.

screenshot.gif

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:datetime_picker_formfield/datetime_picker_formfield.dart';

// ...

class BasicDateField extends StatelessWidget {
  final format = DateFormat("yyyy-MM-dd");
  @override
  Widget build(BuildContext context) {
    return Column(children: <Widget>[
      Text('Basic date field (${format.pattern})'),
      DateTimeField(
        format: format,
        onShowPicker: (context, currentValue) {
          return showDatePicker(
              context: context,
              firstDate: DateTime(1900),
              initialDate: currentValue ?? DateTime.now(),
              lastDate: DateTime(2100));
        },
      ),
    ]);
  }
}

class BasicTimeField extends StatelessWidget {
  final format = DateFormat("HH:mm");
  @override
  Widget build(BuildContext context) {
    return Column(children: <Widget>[
      Text('Basic time field (${format.pattern})'),
      DateTimeField(
        format: format,
        onShowPicker: (context, currentValue) async {
          final time = await showTimePicker(
            context: context,
            initialTime: TimeOfDay.fromDateTime(currentValue ?? DateTime.now()),
          );
          return DateTimeField.convert(time);
        },
      ),
    ]);
  }
}

class BasicDateTimeField extends StatelessWidget {
  final format = DateFormat("yyyy-MM-dd HH:mm");
  @override
  Widget build(BuildContext context) {
    return Column(children: <Widget>[
      Text('Basic date & time field (${format.pattern})'),
      DateTimeField(
        format: format,
        onShowPicker: (context, currentValue) async {
          final date = await showDatePicker(
              context: context,
              firstDate: DateTime(1900),
              initialDate: currentValue ?? DateTime.now(),
              lastDate: DateTime(2100));
          if (date != null) {
            final time = await showTimePicker(
              context: context,
              initialTime:
                  TimeOfDay.fromDateTime(currentValue ?? DateTime.now()),
            );
            return DateTimeField.combine(date, time);
          } else {
            return currentValue;
          }
        },
      ),
    ]);
  }
}
Comments
  • Double Datepicker raised

    Double Datepicker raised

    DateTimePickerFormField( firstDate: DateTime.now(), inputType: InputType.date, format: DateFormat('dd-MM-yyyy'), editable: false, validator: (DateTime value) { if (value == null) { return 'Data obbligatoria'; } else { widget.orderDate = value; } }, decoration: InputDecoration(labelText: 'Data *', hasFloatingPlaceholder: false), );

    this is raised two or many times at open.

    opened by sante85 9
  • DatePicker instead of DateTimePicker

    DatePicker instead of DateTimePicker

    Hey Hi...

    I need help as: "I want only DatePicker to be displayed." But, DateTimePickerFormField displays Date Picker & Time Picker both.

    opened by pacifire 9
  • Keyboard opening although editable is false

    Keyboard opening although editable is false

    Im using plugin version 0.2.0.

    I have a field where date should only picked up by picker but not the manaual input so i kept editable to false, but still when i clicked the DateTimePickrField keyboard and picker both are opening. My expectation is to open only picker but not the keyboard.

    Flutter version: 1.6.3 Android: oreo.

    opened by knvpk 8
  • prevent manual text input

    prevent manual text input

    Hi, just wondering if it would be best to prevent people typing in dates by hand? Or having a little logic to disable this if wanted. The former is achievable by removing parent.controller.text.isEmpty && previousValue.isEmpty. Want a pull request?

    cheers, Andy.

    void inputChanged() {
    if (//parent.controller.text.isEmpty &&
        //_previousValue.isEmpty &&
       parent.focusNode.hasFocus) {
      getDateTimeInput(context).then((date) {
        parent.focusNode.unfocus();
        setState(() {
          parent.controller.text = _toString(date, parent.format);
          setValue(date);
        });
      });
    } else if (parent.resetIcon != null &&
        parent.controller.text.isEmpty == showResetIcon) {
      setState(() => showResetIcon = !showResetIcon);
      // parent.focusNode.unfocus();
    }
    _previousValue = parent.controller.text;
    if (!parent.focusNode.hasFocus) {
      setValue(_toDate(parent.controller.text, parent.format));
    }
  }
    opened by andytwoods 7
  • Focus Manager - Concurrent Modification Exception

    Focus Manager - Concurrent Modification Exception

    When showing the picker there is a concurrent modification exception thrown every time. My best guess is the Text field and datepicker are trying to get the focus when the user clicks on the text field.

    datetime_picker_formfield: ^0.4.0

    Flutter (Channel beta, v1.7.8+hotfix.4, on Mac OS X 10.14.5 18F132, locale en-US) • Flutter version 1.7.8+hotfix.4 at /Users/saltechsystems/flutter • Framework revision 20e59316b8 (4 days ago), 2019-07-18 20:04:33 -0700 • Engine revision fee001c93f • Dart version 2.4.0

    E/flutter ( 9546): [ERROR:flutter/lib/ui/ui_dart_state.cc(148)] Unhandled Exception: Concurrent modification during iteration: Instance of '_CompactLinkedHashSet<FocusNode>'.
E/flutter ( 9546): #0      _CompactIterator.moveNext (dart:collection-patch/compact_hash.dart:443:7)
E/flutter ( 9546): #1      FocusManager._applyFocusChange (package:flutter/src/widgets/focus_manager.dart:1056:28)
E/flutter ( 9546): #2      _rootRun (dart:async/zone.dart:1120:38)
E/flutter ( 9546): #3      _CustomZone.run (dart:async/zone.dart:1021:19)
E/flutter ( 9546): #4      _CustomZone.runGuarded (dart:async/zone.dart:923:7)
E/flutter ( 9546): #5      _CustomZone.bindCallbackGuarded.<anonymous closure> (dart:async/zone.dart:963:23)
E/flutter ( 9546): #6      _rootRun (dart:async/zone.dart:1124:13)
E/flutter ( 9546): #7      _CustomZone.run (dart:async/zone.dart:1021:19)
E/flutter ( 9546): #8      _CustomZone.runGuarded (dart:async/zone.dart:923:7)
E/flutter ( 9546): #9      _CustomZone.bindCallbackGuarded.<anonymous closure> (dart:async/zone.dart:963:23)
E/flutter ( 9546): #10     _microtaskLoop (dart:async/schedule_microtask.dart:41:21)
E/flutter ( 9546): #11     _startMicrotaskLoop (dart:async/schedule_microtask.dart:50:5)
    opened by bawelter 5
  • hour and minute not focus automatically after selecting date

    hour and minute not focus automatically after selecting date

    When I select date not focusing me automatically to select hours and when i select hour datetime-picker not focusing me automatically in minute selection. To do that I have to prees button every time but I want to do that automatically. Now how could i do this, please help me. Thank you.

    enhancement 
    opened by Basher7 5
  • Clearing form field

    Clearing form field

    Clearing form field doesn't trigger onChanged so if setting a value there it sticks. Should onChanged be triggered for clearing form field or is there another way to clear value?

    opened by danielc103 5
  • Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null

    Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null

    After flutter upgrade to 3.0.0 the following warning pops up:

    ./../../../development/flutter/.pub-cache/hosted/pub.dartlang.org/datetime_picker_formfield-2.0.0/lib/datetime_picker_formfield.dart:306:20: Warning: Operand of null-aware
operation '!' has type 'WidgetsBinding' which excludes null.
 - 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('../../../../development/flutter/packages/flutter/lib/src/widgets/binding.dart').
    WidgetsBinding.instance!.addPostFrameCallback((_) {
    opened by ztrag 4
  • Ability to disable user keyboard entry

    Ability to disable user keyboard entry

    In my app I don`t want to allow user to manually enter some value, instead I want him to always use the dialogs. Unfortunately, the parameters: enableInteractiveSelection or enabled ,does not do the work. This would nice to have as a feature

    opened by alexZaicev 4
  • Error: No named parameter with the name 'readOnly'.

    Error: No named parameter with the name 'readOnly'.

    hi, when i import the package show this error for me:

    Compiler message: file:///home/jackson/development/flutter/.pub-cache/hosted/pub.dartlang.org/datetime_picker_formfield-0.4.3/lib/datetime_picker_formfield.dart:98:17: Error: No named parameter with the name 'readOnly'. readOnly: readOnly, ^^^^^^^^ file:///home/jackson/development/flutter/packages/flutter/lib/src/material/text_field.dart:134:9: Context: Found this candidate, but the arguments don't match. const TextField({

    my flutter version is Flutter 1.5.4 my dart version Dart 2.3.0

    opened by jacksonwilliampluskota 4
  • DateTimePickerFormField overflow on small screens

    DateTimePickerFormField overflow on small screens

    I am currently running this on a small screen as I am running integration tests on their CI and it's running on an emulator with a small screen (size not confirmed) so I thought I would pick a small screen for a local emulator and then ran the tests and I got the issues with the DateTimePickerFormField. See image of it running on 4 WVGA (Nexus S) API 28 emulator

    DateTimePickerFormField(
                  editable: false,
                  key: Key("deadline-selector"),
                  validator: (field) {
                    if (field == _createJobController.startDate || field == null) {
                      return "You must enter a future project deadline";
                    } else {
                      return null;
                    }
                  },
                  decoration: InputDecoration(hintText: "Tap to enter project deadline"),
                  initialDate: _createJobController.startDate,
                  firstDate: _createJobController.startDate.add(Duration(days: -1)),
                  dateOnly: true,
                  format: DateFormat("d MMMM yyyy"),
                  onSaved: (newDate) => _createJobController.deadline = newDate)

    screenshot_1548944703

    Flutter issue 
    opened by georgeherby 4
  • Is it really discontinued? Which fork is the best maintained?

    Is it really discontinued? Which fork is the best maintained?

    The pub.dev lists the package as discontinued. Is this just a mistake, or for real? This repo has 104 forks so far, does anyone know which one is the best maintained? https://github.com/jifalops/datetime_picker_formfield/network/members

    opened by MrCsabaToth 0
  • 🐛 Bug on Windows version - time returned is out by one hour

    🐛 Bug on Windows version - time returned is out by one hour

    We're expanding our app to include Desktop versions.

    Unforutently the DateTimeField is failing with an issue that seems to be Windows-specific.

    When picking a time it's displaying the selected time but returns a time one hour in the future (on the 2nd of Jan 1970)

    For example 11:34 AM becomes => 00:34 am (1970-01-02 00:34:00.000)

    This is not affecting Android or iOS builds and seems to be specific to Windows.

    implementation code looks like this:

     return DateTimeField(
      format: DateFormat(getFormatString(widget.definition.inputType)),
      validator: getValidator(),
      decoration: InputDecoration(
          labelText: widget.definition.name,
          floatingLabelBehavior: FloatingLabelBehavior.never),
      onChanged: dateUpdated,
      autofocus: false,
      initialValue: widget.data,
      onShowPicker: (BuildContext context, DateTime? currentValue) async {
        DateTime? date;
        if (<InputType>[InputType.date, InputType.both]
            .contains(widget.definition.inputType)) {
          date = await showDatePicker(
              context: context,
              firstDate: DateTime(1900),
              initialDate: currentValue ?? DateTime.now(),
              lastDate: DateTime(2100));
          if (date == null) {
            return currentValue;
          }
        }
        TimeOfDay? time;
        if (<InputType>[InputType.time, InputType.both]
            .contains(widget.definition.inputType)) {
          time = await showTimePicker(
            context: context,
            initialEntryMode: TimePickerEntryMode.dial,
            initialTime: TimeOfDay.fromDateTime(currentValue ?? DateTime.now()),
          );
          if (time == null) {
            return currentValue;
          }
        }

        switch (widget.definition.inputType) {
          case InputType.date:
            return date;
          case InputType.time:
            return DateTimeField.combine(DateTime(0), time);
          case InputType.both:
          default:
            return DateTimeField.combine(date!, time);
        }
      },
    );
    opened by NickoftheSouth 0
  • Flutter android app crashing building error

    Flutter android app crashing building error

    Following error gives in building android app, https://prnt.sc/dSAWtoybEo0K

    It can be fixed by C:\src\flutter.pub-cache\hosted\pub.dartlang.org\datetime_picker_formfield-2.0.1\lib\datetime_picker_formfield.dart line 315 WidgetsBinding?.instance?.addPostFrameCallback((_) {} ,Null operator check, pls merged it by correcting it.

    opened by ThusithaDeepal 0
  • Flutter application crashing on build on iOS.

    Flutter application crashing on build on iOS.

    The app is getting built by Xcode & launches with a white screen & crashes. The only output displayed in the console is a warning from this plugin.

    Launching lib/main.dart on iPhone 13 in debug mode... Running Xcode build... Xcode build done. 91.2s remote notifications are not supported in the simulator Debug service listening on ws://127.0.0.1:51859/afEFfGq37EE=/ws Syncing files to device iPhone 13... ../../Developer/flutter/.pub-cache/hosted/pub.dartlang.org/datetime_picker_formfield-2.0.0/lib/datetime_picker_formfield.dart:306:20: Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null.

    • 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('../../Developer/flutter/packages/flutter/lib/src/widgets/binding.dart'). WidgetsBinding.instance!.addPostFrameCallback((_) { ^ Lost connection to device.
    opened by mishrhm 0
Owner
Jacob Phillips
Jacob Phillips
GitHub
A DateTime picker that lets user to select a date and the time, with start & end as a range

Omni DateTime Picker A DateTime picker that lets user to select a date and the time, with start & end as a range. Screenshots Getting started Add this

null 17 Dec 29, 2022
A pure dart package with collection of Nepali Utilities like Date converter, Date formatter, DateTime, Nepali Numbers, Nepali Unicode, Nepali Moments and many more.

Nepali Utilities for Dart A pure dart package with collection of Nepali Utilities like Date converter, Date formatter, DateTime, Nepali Number, Nepali

Sarbagya Dhaubanjar 23 Nov 22, 2022
A flutter date time picker

Flutter Datetime Picker (Pub) flutter_datetime_picker A flutter date time picker inspired by flutter-cupertino-date-picker you can choose date / time

Realank 559 Dec 26, 2022
Flutter Date & Time Range Picker

F-DateTimeRangePicker Date and Time Range Picker for Flutter Installing: dependencies: f_datetimerangepicker: ^0.2.0 Using: import 'package:f_datet

Long Phan 20 Jan 18, 2022
Allows to use date pickers without dialog. Provides some customizable styles for date pickers.

flutter_date_pickers Allows to use date pickers without dialog. Provides some customizable styles for date pickers. A set of date pickers: DayPicker f

null 196 Dec 29, 2022
A Flutter package for adding a DateRange widget into a form. A date picker UX is provided by showDateRangePicker.

A Flutter package for adding a DateRange widget into a form. A date picker UX is provided by showDateRangePicker.

JMA Consulting 9 Mar 12, 2022
⏰ Type-safe DateTime and Duration calculations, powered by extensions.

⏰ Time With shiny extensions, if you have ever written something like this, then look no further: final DateTime fourHoursFromNow = DateTime.now() + D

Jeremiah Ogbomo 467 Dec 28, 2022
Flutter Date Picker Library that provides a calendar as a horizontal timeline.

DatePickerTimeline Flutter Date Picker Library that provides a calendar as a horizontal timeline. How To Use Import the following package in your dart

LiLi 0 Oct 25, 2021
Flutter Cupertino Date Picker

Flutter Cupertino Date Picker [pub packages] | 中文说明 Flutter cupertino date picker. Usage 1. Depend Add this to you package's pubspec.yaml file: depend

Ryuuzaki 0 Nov 9, 2021
Flutter Date Picker Library that provides a calendar as a horizontal timeline

Flutter Date Picker Library that provides a calendar as a horizontal timeline.

Vivek Kaushik 214 Jan 7, 2023
Beautiful Date Range Picker Dialog For Flutter

Beautiful Date Range Picker Dialog For Flutter

Mazouzi Aymene 36 Dec 22, 2022
A Custom Time Interval Select Dropdown for getting a Time Range

time_interval_picker A Custom Time Interval Select Dropdown for getting a Time R

Anurag Bansal 2 Apr 13, 2022
A day night time picker for Flutter. Beautiful day and night animation with Sun and Moon assets.

DayNightTimePicker A day night time picker for Flutter with Zero Dependencies. Default style: IOS style: View it on pub.dev Installation Add to pubspe

Subhamay Dutta 68 Dec 29, 2022
Flutter package to create a day date scroller

scrolling_day_calendar A flutter calendar package to allow users to scroll through given dates either by swiping left and right or pressing the arrows

null 8 Jul 12, 2020
Calendar widget for flutter that is swipeable horizontally. This widget can help you build your own calendar widget highly customizable.

flutter_calendar_carousel Calendar widget for flutter that is swipeable horizontally. This widget can help you build your own calendar widget highly c

dooboolab 750 Jan 7, 2023
a time planner for flutter to show task on table

A beautiful, easy to use and customizable time planner for flutter mobile ?? , desktop ?? and web ??

Mohammad Jamalianpour 150 Dec 21, 2022
CalendarDatePicker2 - A lightweight and customizable calendar picker based on Flutter CalendarDatePicker

A lightweight and customizable calendar picker based on Flutter CalendarDatePicker, with support for single date picker, range picker and multi picker.

Neo Liu 27 Dec 22, 2022
Calendar widget for flutter

Calendar Shows a scrolling calendar list of events. This is still relatively basic, it always assumes that the getEvents returns the entire list of ca

null 223 Dec 19, 2022
Highly customizable, feature-packed calendar widget for Flutter

Table Calendar Highly customizable, feature-packed Flutter Calendar with gestures, animations and multiple formats. Table Calendar with custom styles

Aleksander Woźniak 1.5k Jan 7, 2023