Flutter: Date and Time Pickers (DatePicker & TimePicker)

We use Flutter's built-in showDatePicker and showTimePicker functions to get time-related data such as date of birth or appointment time from users.

Live Demo

You can try these widgets in the interactive example below:

DatePicker

Opens a calendar interface allowing the user to select day, month, and year.

Basic Usage

This function returns a Future<DateTime?>, meaning it is asynchronous. We must use await to wait for the user to make a selection.

DateTime? selectedDate;

Future<void> _selectDate(BuildContext context) async {
  final DateTime? picked = await showDatePicker(
    context: context,
    initialDate: DateTime.now(), // Date initially selected when calendar opens
    firstDate: DateTime(2000),   // Earliest selectable date
    lastDate: DateTime(2025),    // Latest selectable date
  );
  
  if (picked != null && picked != selectedDate) {
    setState(() {
      selectedDate = picked;
    });
  }
}

To call it when a button is pressed:

ElevatedButton(
  onPressed: () => _selectDate(context),
  child: Text(selectedDate == null 
      ? 'Select Date' 
      : "${selectedDate!.day}/${selectedDate!.month}/${selectedDate!.year}"),
)

TimePicker

Allows the user to select the hour and minute.

Basic Usage

This function returns a Future<TimeOfDay?>.

TimeOfDay selectedTime = TimeOfDay.now();

Future<void> _selectTime(BuildContext context) async {
  final TimeOfDay? picked = await showTimePicker(
    context: context,
    initialTime: selectedTime,
    builder: (context, child) {
      return MediaQuery(
        // Force 24-hour format (optional)
        data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
        child: child!,
      );
    },
  );

  if (picked != null && picked != selectedTime) {
    setState(() {
      selectedTime = picked;
    });
  }
}

Localization

For the calendar to appear in your desired language, you need to add localization delegates to your MaterialApp.

MaterialApp(
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('en', ''), // English
    const Locale('tr', ''), // Turkish
  ],
  // ...
)

When you do this, showDatePicker will automatically display day and month names according to the device's language (or the language specified by the locale parameter).

Theme Customization

You can use the builder parameter to match the picker colors to your app's theme.

showDatePicker(
  context: context,
  // ... parameters
  builder: (context, child) {
    return Theme(
      data: Theme.of(context).copyWith(
        colorScheme: ColorScheme.light(
          primary: Colors.red, // Selected day color, header color
          onPrimary: Colors.white, // Selected day text color
          onSurface: Colors.black, // Color of other text in the calendar
        ),
      ),
      child: child!,
    );
  },
);

Summary

• showDatePicker: For date selection. Returns DateTime.
• showTimePicker: For time selection. Returns TimeOfDay.
• Asynchronous: Both operations must be awaited with await.
• Localization: The flutter_localizations package is required for calendar localization.