How we can use time and date picker together in flutter?

Question

I want to show date and time picker together but I think no any widget or lib provides this feature in flutter. Any suggestion or solution ?

Luca

Answer 1

Try flutter_datetime_picker here hope its help to you.

In this package you want to pick date and time both.

Try date_time_picker package also.

Updated Answer:

You used flutter_cupertino_datetime_picker and set the date format on your need

    ElevatedButton(
          onPressed: () {
            dateTimePickerWidget(context);
          },
          child: Text('Pick Date-Time'),
        ),

method for dateTimePicker:

  dateTimePickerWidget(BuildContext context) {
    return DatePicker.showDatePicker(
      context,
      dateFormat: 'dd MMMM yyyy HH:mm',
      initialDateTime: DateTime.now(),
      minDateTime: DateTime(2000),
      maxDateTime: DateTime(3000),
      onMonthChangeStartWithFirstDate: true,
      onConfirm: (dateTime, List<int> index) {
        DateTime selectdate = dateTime;
        final selIOS = DateFormat('dd-MMM-yyyy - HH:mm').format(selectdate);
        print(selIOS);
      },
    );
  }

Your Output:

16-Mar-2022 - 12:28

Result Screen for Widget ->

Result Screen for DateTimePicker ->

Newspaperwoman

@MuhammadUmairSaqib check my updated answer, I tried other package – Newspaperwoman

Answer 2

If you don't want to add extra packages, combine showDatePicker and showTimePicker.

import 'package:flutter/material.dart';

Future<DateTime?> showDateTimePicker({
  required BuildContext context,
  DateTime? initialDate,
  DateTime? firstDate,
  DateTime? lastDate,
}) async {
  initialDate ??= DateTime.now();
  firstDate ??= initialDate.subtract(const Duration(days: 365 * 100));
  lastDate ??= firstDate.add(const Duration(days: 365 * 200));

  final DateTime? selectedDate = await showDatePicker(
    context: context,
    initialDate: initialDate,
    firstDate: firstDate,
    lastDate: lastDate,
  );

  if (selectedDate == null) return null;

  if (!context.mounted) return selectedDate;

  final TimeOfDay? selectedTime = await showTimePicker(
    context: context,
    initialTime: TimeOfDay.fromDateTime(initialDate),
  );

  return selectedTime == null
      ? selectedDate
      : DateTime(
          selectedDate.year,
          selectedDate.month,
          selectedDate.day,
          selectedTime.hour,
          selectedTime.minute,
        );
}

Aundrea

Thanks for the solution! I believe you wanted to write initialTime: TimeOfDay.fromDateTime(initialDate), instead of selectedDate? I made an edit on that. – Haigh

Answer 3

You can use this code

showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2000),
  lastDate: DateTime(2101),
).then((selectedDate) {
  // After selecting the date, display the time picker.
  if (selectedDate != null) {
    showTimePicker(
      context: context,
      initialTime: TimeOfDay.now(),
    ).then((selectedTime) {
      // Handle the selected date and time here.
      if (selectedTime != null) {
        DateTime selectedDateTime = DateTime(
          selectedDate.year,
          selectedDate.month,
          selectedDate.day,
          selectedTime.hour,
          selectedTime.minute,
        );
        print(selectedDateTime); // You can use the selectedDateTime as needed.
      }
    });
  }
});

Formfitting

DateTime selectedDateTime = DateTime( sDate.year, sDate.month, sDate.day, selectedTime.hour, selectedTime.minute, ); you have not used the time varibale so time not coming use my code – Fanestil

Answer 4

There is a package and it's also null safety.

TextButton(
onPressed: () {
    DatePicker.showDatePicker(context,
                          showTitleActions: true,
                          minTime: DateTime(2019, 3, 5),
                          maxTime: DateTime(2022, 1, 1), onChanged: (date) {
                      }, onConfirm: (date) {
                        print('Confirmed $date');
                      }, currentTime: DateTime.now(), locale: LocaleType.it);
},
child: Text(
    'Show Datetime picker (italian)',
    style: TextStyle(color: Colors.blue),
));

Overcoat

this only shows date. I have tried it earlier – Luca