DateTimePicker class

A DateTimePicker that contains a TextField.

This is a convenience widget that wraps a TextField widget in a DateTimePicker.

A Form ancestor is not required. The Form simply makes it easier to save, reset, or validate multiple fields at once. To use without a Form, pass a GlobalKey to the constructor and use GlobalKey.currentState to save or reset the form field.

When a controller is specified, its TextEditingController.text defines the initialValue. If this FormField is part of a scrolling container that lazily constructs its children, like a ListView or a CustomScrollView, then a controller should be specified. The controller's lifetime should be managed by a stateful widget ancestor of the scrolling container.

If a controller is not specified, initialValue can be used to give the automatically generated controller an initial value.

Remember to dispose of the TextEditingController when it is no longer needed. This will ensure we discard any resources used by the object.

For a documentation about the various parameters, see TextField.

{@tool snippet}

Creates a DateTimePicker with an InputDecoration and validator function.

If the user enters valid text, the TextField appears normally without any warnings to the user

![ If the user enters invalid text, the error message returned from the validator function is displayed in dark red underneath the input] (https://flutter.github.io/assets-for-api-docs/assets/material/text_form_field_error.png)

DateTimePicker(
  decoration: const InputDecoration(
    icon: Icon(Icons.person),
    hintText: 'What do people call you?',
    labelText: 'Name *',
  ),
  onSaved: (String value) {
    // This optional block of code can be used to run
    // code when the user saves the form.
  },
  validator: (String value) {
    return value.contains('@') ? 'Do not use the @ char.' : null;
  },
)

{@end-tool}

{@tool dartpad --template=stateful_widget_material} This example shows how to move the focus to the next field when the user presses the ENTER key.

import 'package:flutter/services.dart';

Widget build(BuildContext context) {
  return Material(
    child: Center(
      child: Shortcuts(
        shortcuts: <LogicalKeySet, Intent>{
          // Pressing enter on the field will now move to the next field.
          LogicalKeySet(LogicalKeyboardKey.enter):
              Intent(NextFocusAction.key),
        },
        child: FocusTraversalGroup(
          child: Form(
            autovalidate: true,
            onChanged: () {
              Form.of(primaryFocus.context).save();
            },
            child: Wrap(
              children: List<Widget>.generate(5, (int index) {
                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: ConstrainedBox(
                    constraints: BoxConstraints.tight(Size(200, 50)),
                    child: DateTimePicker(
                      initialValue: DateTime.now().toString(),
                      firstDate: DateTime(2000),
                      lastDate: DateTime(2100),
                      onSaved: (String value) {
                        print('Value for field $index saved as "$value"');
                      },
                    ),
                  ),
                );
              }),
            ),
          ),
        ),
      ),
    ),
  );
}

{@end-tool}

See also:

Inheritance

Constructors

DateTimePicker({Key? key, DateTimePickerType type = DateTimePickerType.date, TextEditingController? controller, DateTime? firstDate, DateTime? lastDate, DateTime? initialDate, TimeOfDay? initialTime, String? dateMask, Widget? icon, String? dateLabelText, String? timeLabelText, String? dateHintText, String? timeHintText, String? calendarTitle, String? cancelText, String? confirmText, String? fieldLabelText, String? fieldHintText, String? errorFormatText, String? errorInvalidText, DatePickerEntryMode? initialEntryMode, DatePickerMode? initialDatePickerMode, bool selectableDayPredicate(DateTime)?, TextDirection? textDirection, Locale? locale, bool useRootNavigator = false, RouteSettings? routeSettings, bool use24HourFormat = true, double? timeFieldWidth, bool timePickerEntryModeInput = false, String? initialValue, FocusNode? focusNode, InputDecoration? decoration, TextCapitalization textCapitalization = TextCapitalization.none, TextInputAction? textInputAction, TextStyle? style, StrutStyle? strutStyle, TextAlign textAlign = TextAlign.start, TextAlignVertical? textAlignVertical, bool autofocus = false, bool readOnly = false, ToolbarOptions? toolbarOptions, bool showCursor = false, bool obscureText = false, bool autocorrect = true, SmartDashesType? smartDashesType, SmartQuotesType? smartQuotesType, bool enableSuggestions = true, bool autovalidate = false, MaxLengthEnforcement? maxLengthEnforcement, int maxLines = 1, int? minLines, bool expands = false, int? maxLength, ValueChanged<String>? onChanged, VoidCallback? onEditingComplete, ValueChanged<String>? onFieldSubmitted, FormFieldSetter<String>? onSaved, FormFieldValidator<String>? validator, List<TextInputFormatter>? inputFormatters, bool enabled = true, double cursorWidth = 2.0, Radius? cursorRadius, Color? cursorColor, Brightness? keyboardAppearance, EdgeInsets scrollPadding = const EdgeInsets.all(20.0), bool enableInteractiveSelection = true, InputCounterWidgetBuilder? buildCounter, ScrollPhysics? scrollPhysics})
Creates a DateTimePicker that contains a TextField.

Properties

autovalidateMode → AutovalidateMode
Used to enable/disable this form field auto validation and update its error text.
finalinherited
builder → FormFieldBuilder<String>
Function that returns the widget representing this form field. It is passed the form field state as input, containing the current value and validation state of this field.
finalinherited
calendarTitle → String?
Optional strings for the cancelText to override the default text.
final
cancelText → String?
Optional strings for the cancelText to override the default text.
final
confirmText → String?
Optional strings for the confirmText to override the default text.
final
controller → TextEditingController?
Controls the text being edited.
final
dateHintText → String?
Text that suggests what sort of date input the field accepts.
final
dateLabelText → String?
Text that describes the date input field.
final
dateMask → String?
For forms that match one of our predefined skeletons, we look up the corresponding pattern in locale (or in the default locale if none is specified) and use the resulting full format string. This is the preferred usage, but if newPattern does not match one of the skeletons, then it is used as a format directly, but will not be adapted to suit the locale.
final
enabled → bool
Whether the form is able to receive user input.
finalinherited
errorFormatText → String?
Optional strings for the errorFormatText to override the default text.
final
errorInvalidText → String?
Optional strings for the errorInvalidText to override the default text.
final
fieldHintText → String?
Optional strings for the fieldHintText to override the default text.
final
fieldLabelText → String?
Optional strings for the fieldLabelText to override the default text.
final
firstDate → DateTime?
The earliest allowable DateTime that the user can select.
final
hashCode → int
The hash code for this object.
no setterinherited
icon → Widget?
An icon to show before the input field and outside of the decoration's container.
final
initialDate → DateTime?
The initial date to be used for the date picker if initialValue is null or empty
final
initialDatePickerMode → DatePickerMode?
An optional initialDatePickerMode argument can be used to have the calendar date picker initially appear in the DatePickerMode.year or DatePickerMode.day mode. It defaults to DatePickerMode.day, and must be non-null.
final
initialEntryMode → DatePickerEntryMode?
An optional initialEntryMode argument can be used to display the date picker in the DatePickerEntryMode.calendar (a calendar month grid) or DatePickerEntryMode.input (a text input field) mode. It defaults to DatePickerEntryMode.calendar and must be non-null.
final
initialTime → TimeOfDay?
The initial time to be used for the time picker if initialValue is null or empty
final
initialValue → String?
An optional value to initialize the form field to, or null otherwise.
finalinherited
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
lastDate → DateTime?
The latest allowable DateTime that the user can select.
final
locale → Locale?
An optional locale argument can be used to set the locale for the date picker. It defaults to the ambient locale provided by Localizations.
final
onChanged → ValueChanged<String>?
final
onSaved → FormFieldSetter<String>?
An optional method to call with the final value when the form is saved via FormState.save.
finalinherited
restorationId → String?
Restoration ID to save and restore the state of the form field.
finalinherited
routeSettings → RouteSettings?
Creates data used to construct routes.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
selectableDayPredicate → (bool Function(DateTime)?)
An optional selectableDayPredicate function can be passed in to only allow certain days for selection. If provided, only the days that selectableDayPredicate returns true for will be selectable. For example, this can be used to only allow weekdays for selection. If provided, it must return true for initialDate.
final
textDirection → TextDirection?
An optional textDirection argument can be used to set the text direction (TextDirection.ltr or TextDirection.rtl) for the date picker. It defaults to the ambient text direction provided by Directionality. If both locale and textDirection are non-null, textDirection overrides the direction chosen for the locale.
final
timeFieldWidth → double?
The width for time text field when DateTimePickerType is dateTimeSeparated.
final
timeHintText → String?
Text that suggests what sort of time input the field accepts.
final
timeLabelText → String?
Text that describes the time input field.
final
timePickerEntryModeInput → bool
final
type → DateTimePickerType
The DateTimePicker type: date, time, dateTime or dateTimeSeparate.
final
use24HourFormat → bool
Show a dialog with time unconditionally displayed in 24 hour format.
final
useRootNavigator → bool
The context, useRootNavigator and routeSettings arguments are passed to showDialog, the documentation for which discusses how it is used. context and useRootNavigator must be non-null.
final
validator → FormFieldValidator<String>?
An optional method that validates an input. Returns an error string to display if the input is invalid, or null otherwise.
finalinherited

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → _DateTimePickerState
Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited