A Flutter widget to show a text form field to display a date or clock dialog

Last update: Jan 6, 2023

Overview

date_time_picker

A Flutter widget to show a text form field to display a date or clock dialog.
This widget extend TextField and has a similar behavior as TextFormField

Usage

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  date_time_picker: "^2.1.0"

In your library add the following import:

import 'package:date_time_picker/date_time_picker.dart';

For help getting started with Flutter, view the online documentation.

Example

There are four presentations for DateTimePicker and can be defined in the type parameter:

DateTimePickerType.date will present a text field with the action tap showing a datePicker dialog box;
DateTimePickerType.time will present a text field with the action tap showing a timePicker dialog box;
DateTimePickerType.dateTime will present a text field with the action tap showing a datePicker dialog box then a timePicker dialog box;
DateTimePickerType.dateTimeSeparated will display two text fields side by side, the first for date and the second for time. Each displaying their respective dialog box, datePicker and timePicker in the tap action;

DateTimePicker(
  type: date, // options: [date | time | dateTime | dateTimeSeparated], default is date
  ...
)

initialValue or controller.text can be null, empty or a DateTime string otherwise it will throw an error.

DateTimePicker(
  initialValue: '',
  firstDate: DateTime(2000),
  lastDate: DateTime(2100),
  dateLabelText: 'Date',
  onChanged: (val) => print(val),
  validator: (val) {
    print(val);
    return null;
  },
  onSaved: (val) => print(val),
);

More complete example:

print(val), validator: (val) { print(val); return null; }, onSaved: (val) => print(val), );">

DateTimePicker(
  type: DateTimePickerType.dateTimeSeparate,
  dateMask: 'd MMM, yyyy',
  initialValue: DateTime.now().toString(),
  firstDate: DateTime(2000),
  lastDate: DateTime(2100),
  icon: Icon(Icons.event),
  dateLabelText: 'Date',
  timeLabelText: "Hour",
  selectableDayPredicate: (date) {
    // Disable weekend days to select from the calendar
    if (date.weekday == 6 || date.weekday == 7) {
      return false;
    }

    return true;
  },
  onChanged: (val) => print(val),
  validator: (val) {
    print(val);
    return null;
  },
  onSaved: (val) => print(val),
);

The result of val in onChanged, validator and onSaved will be a DateTime String or just a Time String:

ex.: [2020-07-20 14:30] or [15:30] DateTimePickerType.time;
month, day, hour and minute will be 2 digits and time always be in 24 hours mode;
but the presentation in text field can be formated by the dateMask parameter.

Preview

Comments

First date after current date is not possible when initialvalue is null

When setting firstDate to a value after the current date and the initialValue is null, this error is shown: !initialDate.isBefore(firstDate) I have looked in the code and it is because a null initialValue will set initialDate to current date, eg.: line 717: initialDate: _dDate ?? DateTime.now(),

Solution: The internal initialDate should be set to firstDate if initialValue is null.

EDIT: I've looked further in the code, and there seems to be a parameter named "initialDate" on the DateTimePicker. This would solve my issue, given that setting "initialDate" still leaves the textfield empty. However, I cannot use this parameter in my code, despite having the latest version. Is this parameter a bug fix that simply hasn't been released yet?

opened by TKalo 3

Cleared TextEditingController value doesn't update its TextField value

I have 2 controller for each DatePicker field in StatelessWidget:

  final dateStartController = TextEditingController();  
  final dateEndController = TextEditingController();

then i put clear button to clear its TextField value

Stack(
  children; [
    DateTimePicker(
        controller: dateStartController, // last picked date (doesn't clear after trigger IconButton)
        ...
    )    
    IconButton(
        icon: Icon(Icons.clear, size: 18, color: Colors.black38,),
            onPressed: () {
            dateStartController.clear(); // clear its value but not for its TextField
            log(dateStartController.text, name: 'DATE_START'); // empty
        },
    )
  ]
);

this is what it looks like

dateStartController.clear(); clear its value but not for its TextField. should i use Stateful?

opened by kingmaster772 3

date_time_picker

date_time_picker ^2.0.1 which doesn't match any versions, version solving failed. pub get failed (1; Because webanxo depends on date_time_picker ^2.0.1 which doesn't match any versions, version solving failed.)

opened by celsoncustodio 2
Failed assertion !initialDate.isAfter(lastDate) when initialValue is empty string

When I set the initialValue of the field to be the empty string, and lastDate in the past, when I try to open the date picker, I get an exception because date time picker is opened with DateTime.now() as a default, which breaks the assertion that initial date must be before lastDate. It would be better to add a initialDatePickerDate field for that purpose so that we can keep initial value empty and still work with date time picker dialog properly.

opened by sarbogast 2
flutter pub get fails

flutter pub get fails with error

pub get failed (1; So, because example depends on date_time_picker ^1.1.0 which depends on intl ^0.16.1, version solving failed.)

opened by subair-zufi 2
Using default suggested time does not fill time in textfield.

I'm using a DateTimePicker with type: DateTimePickerType.dateTimeSeparate.

When tapping on the time field a time picker dialog opens with the current time. Pressing OK closes the dialog but does not fill the text field with a time value.

This behavior does work correctly for the date picker, but not for the time picker.

opened by Siteware 2
How to change Date picker theme from blue to other color?

Hi,

Thanks for this package. Very good and highly customizable.

How change default theme of blue color to other color and also how to remove edit button ?

If possible, please do date time picker as a widget instead of opening like popup.

opened by MaheshPeri19 2
statement uses ?? on non-nullable Color theme.backgroundColor
": Warning: Operand of null-aware operation '??' has type 'Color' which excludes null. ../…/lib/flutter_datetime_picker.dart:311

'Color' is from 'dart:ui'. color: theme.backgroundColor ?? Colors.white,"

field already has default set in constructor: " this.backgroundColor = Colors.white,"

creates annoying warning in debugger
opened by brendanchatt 1
adding 12 hour support to displaying the time of day

Displaying the time of day was not respecting the option to not use 24 hour time. I made it where it used the DateTime/DateFormat classes to create the proper time for 12 hour time.

opened by StorminGorman 1
Added initialDate and initialTime fields for when initialValue is empty and lastDate is before now

When I set the initialValue of the field to be the empty string, and lastDate in the past, when I try to open the date picker, I get an exception because date time picker is opened with DateTime.now() as a default, which breaks the assertion that initialDate must be before lastDate. So I added initialDate and initialTime fields for that purpose, so that we can keep initial value empty and still work with date time picker dialog properly.

You can test this with the project here. If you run it as is, using the current version of date_time_picker, and you click the field, you will get an exception. But if you comment in lines 35-37 in pubspec.yaml, and lines 53-57 in main.dart, and get dependencies again to use my fork instead of the current version, now the exception is gone.

This is the easiest solution I could find, and I didn't test the time element because I don't use it right now. So I just did the same thing for time as for date, hoping that it would work.

opened by sarbogast 1
Meridan Differentiation Fails when selected "12:00"

When selected 12:00 in the time picker it displays AM or PM based on selected but when coverting to Timestamp via JS it displays it has AM always****

opened by imcoffeefreak 1

Locale date has not been initialized when use24HourFormat set to false

 [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: LocaleDataException: Locale data has not been initialized, call initializeDateFormatting(<locale>).
E/flutter ( 4297): #0      UninitializedLocaleData._throwException (package:intl/src/intl_helpers.dart:80:5)
E/flutter ( 4297): #1      UninitializedLocaleData.containsKey (package:intl/src/intl_helpers.dart:74:7)
E/flutter ( 4297): #2      DateFormat.localeExists (package:intl/src/intl/date_format.dart:834:28)
E/flutter ( 4297): #3      verifiedLocale (package:intl/src/intl_helpers.dart:159:19)
E/flutter ( 4297): #4      new DateFormat (package:intl/src/intl/date_format.dart:266:27)
E/flutter ( 4297): #5      _DateTimePickerState.set12HourTimeValues (package:date_time_picker/date_time_picker.dart:763:20)
E/flutter ( 4297): #6      _DateTimePickerState._showDateTimePickerDialog (package:date_time_picker/date_time_picker.dart:876:11)
E/flutter ( 4297): <asynchronous suspension>
E/flutter ( 4297):

It is only coming for use24HourFormat: true, If it is set to false it doesn't throw error

opened by AniketDhanak 0

Request: Birthday Input

It would be nice to have another mode, with this dialog first And then open Date Picker only if you need it, by the calendar icon.

You already have this mode, but you need to click on "edit" icon inside date picker first. I suggest swapping them and add a separate DateTimePickerType called "birthDate". It will benefit Flutter community a lot.

Because, for birthdates we have two best quick options: InputDatePickerFormField which lack decoration or cupertino date picker which is non-material style widget.

opened by bgoncharuck 0
Accessing the value using the controller as you would do with a TextField returns a non formatted value
DateTimePicker( controller: myController, dateMask: myDateFormat, initialDate: DateTime.now(), firstDate: DateTime.now().subtract(Duration(days: 365)), lastDate: DateTime.now().add(Duration(days: 365)), )

Retrieving the value via myController.value.text returns the value in Y-m-d format even though myDateFormat has a different value. Is this by design? How should I retrieve the value of the TextField?
opened by DavideBicego 1
Autovalidate mode

Hi. It is not possible to use the autovalidate mode [AutovalidateMode.onUserInteraction]. Would it be possible to add the "autovalidateMode" parameter in a next version?

I modified the local code like this: autovalidateMode: autovalidateMode?? (autovalidate ? AutovalidateMode.always : AutovalidateMode.disabled),

opened by tlinxe 0

Releases(2.1.0)

2.1.0(Jul 8, 2021)

Source code(tar.gz)
Source code(zip)
2.0.0(Mar 9, 2021)

Migrate to null safety. Update SDK constraints to >=2.12.0 <3.0.0 based on beta release guidelines. Updata intl version dependency. Add 2 optional params, initialDate and initialTime to set date picker and time picker to show date and time diferent of now, when initialValue is empty.
Source code(tar.gz)
Source code(zip)
1.1.1(Dec 30, 2020)

Source code(tar.gz)
Source code(zip)
1.1.0(Nov 13, 2020)

Source code(tar.gz)
Source code(zip)
1.0.2(Sep 21, 2020)

Source code(tar.gz)
Source code(zip)
v1.0.1(Aug 19, 2020)

Source code(tar.gz)
Source code(zip)
v1.0.0(Jul 24, 2020)

Source code(tar.gz)
Source code(zip)

Owner

m3uzz Soluções em TI

GitHub https://pub.dartlang.org/packages/date_time_picker

Flutter widget form select a date in horizontal timeline with customizable styles.

Flutter widget form select a date in horizontal timeline with customizable styles. Getting Started You can use this package when you need to add a dat

158 Dec 2, 2022

A flutter horizontal date picker that always shift the selected date to center.

horizontal_center_date_picker A flutter widget provides a horizontal date picker and always aligns selected date in center of the widget. Usage This s

5 Jul 2, 2022

Making-form - A form design with dart programming and auto next facility

3 Nov 15, 2022

Display simple blurry dialog popup for flutter

Blurry Dialog Features Display simple blurry dialog popup Offer built-in themes Possibility to create you custom dialog button click handler callbacks

7 Dec 18, 2022

A Flutter plugin which makes it straightforward to show the native equivalent of a CupertinoAlertDialog or CupertinoActionSheet dialog

9 Dec 9, 2022

A flutter package for the OTP Field widget.

OTP Text Field A flutter package to create a OTP Text Field widget in your application. Stay tuned for the latest updates: ?? Screenshots ⚙️ Installat

108 Oct 30, 2022

Flutter widget to show text in popup or overlay container

flutter_show_more_text_popup Flutter widget to show text in popup or overlay container Installation Add this to your package's pubspec.yaml file depen

44 Jul 5, 2022

Progress Dialog widget for flutter projects with ability to customize loading widget, background color and background blur.

DISCONTINUED Checkout ArsDialog ars_progress_dialog Customizable progress dialog for Flutter applications with smooth animation for background dim col

8 Apr 15, 2022

Widget to let the user search through a keyword string typed on a customizable keyboard in a single or multiple choices list presented as a dropdown in a dialog box or a menu.

searchable_dropdown Widget to let the user search through a keyword string typed on a customizable keyboard in a single or multiple choices list prese