FlutterFlow Docs
Search…
Advanced Functionality πŸ€–
Date/Time Picker Action
You can use the Date/Time Picker Action to bring up a widget that lets users select a specific Date or Date & Time. The selected value can also be accessed using a variable that lets you use it elsewhere in the app.

Properties

Let's take a look at the different properties of the Date/Time Picker Action:
  • Date/Time Picker Type: Use this property to select whether you want to show only a Date picker or Date+Time picker.
  • Default Date/Time: The initial value of the Date/Time picker widget can be set using this property. As this action is triggered the Date/Time picker will show you this default value. Preferably the current date/time is used as the default value but you can customize it and set it from a different variable or define a specific value manually.
  • Allow Past Date/Time: Check this property to allow users to select a Date/Time before the default value. Keeping this unchecked will allow users to select any Date/Time on or after the default value.

Defining the Action

Go to your project page on FlutterFlow and follow the steps below to define a Navigate Action to any widget.
  1. 1.
    Select the widget (like a Button or an IconButton) on which you want to set the Action.
  2. 2.
    Select Actions from the Properties panel (the right menu).
  3. 3.
    Click + Add Action button.
  4. 4.
    Choose a gesture from the dropdown among On Tap, On Double Tap, or On Long Press.
  5. 5.
    Select the Action Type as Date/Time Picker.
  6. 6.
    Next, choose a Date/Time Picker Type either as Date (allows you to only select a date) or Date+Time (allows you to select both date and time).
  7. 7.
    Set the Default Date/Time. You can choose between two options as the Value Source:
    1. 1.
      Specific Value: If you select this option, you have to set the Value manually.
    2. 2.
      From Variable: If you select this option, you need to select the Source of the variable to use.
  8. 8.
    Check the Allow Past Date/Time checkbox if you want to allow the user to select the date/time from before the default value.

Using selected Date/Time value

You can use the Date/Time value that is selected by a user to display as Text, store it on the Firestore database, or pass it to a different screen of the app.
Follow the steps below to display the selected Date/Time as a text:
Before following these steps make sure you have already defined a Date/Time Action on any widget of the current screen.
  1. 1.
    Drag and drop a Text widget onto the canvas.
  2. 2.
    Click Set from Variable present above the field where the text is specified.
  3. 3.
    Select the Source as Widget State.
  4. 4.
    Select Date Picked under Available Options, and the format in which to display the date/time inside the Text widget.
  5. 5.
    You can set a Default Value to display when the date/time has not been picked initially.
  6. 6.
    Click Save.
Similarly, you can also pass the Date Picked value to a different page of the app using Navigate Action.

Code Overview

You can view the code that is generated by FlutterFlow in the background by going to the Developer Menu > View Code from the Tool Bar.
FlutterFlow uses the flutter_datetime_picker package to bring up the Date/Time picker widget. Adding the Date/Time Picker Action to any widget will generate the following code:
1
DatePicker.showDatePicker(
2
context,
3
showTitleActions: true,
4
onConfirm: (date) {
5
setState(() => datePicked = date);
6
},
7
currentTime: getCurrentTimestamp,
8
minTime: getCurrentTimestamp,
9
);
Copied!
Here, showDatePicker() brings up a widget to only set a certain date. If you select Date+Time while defining the action, then you will notice the generated code uses showDateTimePicker() instead.

References

​