[Solved] how to restrict choose date in datepicker flutter

Question

Asked by Md Z on June 22, 2022 (source).

I have two TextFormField startdate and enddate that takes date as a input from date picker. i want to restrict that user can not allow to select enddate before selected startdate.Be able to select from after selected startdate.how can i manage that. Here is my cample code

TextFormField(
              controller: startDate,
              readOnly: true,
              validator: (startDate){
                if(startDate==null|| startDate.isEmpty){
                  return "Please Input Start Date";
                }else return null;
              },
              onTap: () async{
                DateTime? startPickedDate = await showDatePicker(
                    context: context,
                    initialDate: DateTime.now(),
                    firstDate:DateTime.now(),
                    lastDate: DateTime(2100)
                );
                if(startPickedDate!= null){
                  String formattedDate = DateFormat('dd-MM-yyyy').format(startPickedDate);
                  setState(() {
                    startDate.text = formattedDate; //set output date to TextField value.
                  });
                }
              },
            )

            TextFormField(
              controller: endDate,
              readOnly: true,
              
              validator: (endDate){
                if(endDate==null || endDate.isEmpty){
                  return "Please Input End Date";
                }else return null;
              },
              onTap: () async{
                DateTime? endPickedDate = await showDatePicker(
                  context: context,
                  initialDate: DateTime.now(),
                  firstDate:  DateTime.now(),
                  lastDate: DateTime(2100),
                );
                if(endPickedDate!= null){
                  String formattedDate = DateFormat('dd-MM-yyyy').format(endPickedDate);
                  setState(() {
                    endDate.text = formattedDate;
                  }
                  );
                }
              },
            ),

Answer

Question answered by Md. K (source).

All you need is a check to see if startDate controller is empty or not. If it is not empty show date picker. Check the following code for implementation:

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {

  late TextEditingController startDate;
  late TextEditingController endDate;
  @override
  void initState() {
    startDate = TextEditingController();
    endDate = TextEditingController();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextFormField(
          controller: startDate,
          readOnly: true,
          validator: (startDate){
            if(startDate==null|| startDate.isEmpty){
              return "Please Input Start Date";
            }else return null;
          },
          onTap: () async{
            DateTime? startPickedDate = await showDatePicker(
                context: context,
                initialDate: DateTime.now(),
                firstDate:DateTime.now(),
                lastDate: DateTime(2100)
            );
            if(startPickedDate!= null){
              String formattedDate = DateFormat('dd-MM-yyyy').format(startPickedDate);
              setState(() {
                startDate.text = formattedDate; //set output date to TextField value.
              });
            }
          },
        ),

        TextFormField(
          controller: endDate,
          readOnly: true,

          validator: (endDate){
            if(endDate==null || endDate.isEmpty){
              return "Please Input End Date";
            }else {
              return null;
            }
          },
          onTap: () async{
            if (startDate.text.isNotEmpty) {
              String dateTime = startDate.text;
              DateFormat inputFormat = DateFormat('dd-MM-yyyy');
              DateTime input = inputFormat.parse(dateTime);

              DateTime? endPickedDate = await showDatePicker(
                context: context,
                initialDate: input.add(const Duration(days: 1)),
                firstDate:  input.add(const Duration(days: 1)),
                lastDate: DateTime(2100),
              );
              if(endPickedDate!= null){
                String formattedDate = DateFormat('dd-MM-yyyy').format(endPickedDate);
                setState(() {
                  endDate.text = formattedDate;
                }
                );
              }
            } else {
              ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('You need to select Start Date')));
            }
          },
        ),
      ],
    );
  }
}
FLUTTER
SHARE: