How to Display Datepicker When Textformfield is clicked in Flutter ?

TextField Widget is used to get data from users and perform the desired operation. sometimes users need to show data that requires showing Date Picker in a mobile application. To Display, the same kind of data Date Picker is used. In today’s article, we will go through How to display date picker when Textformfield is clicked in flutter?

Video Tutorial

How to Display Datepicker When Textformfield is clicked In Flutter?

It can be done using onTap() property of TextFormField.

TextFormField(
      onTap: (){
        // Below line stops keyboard from appearing
        FocusScope.of(context).requestFocus(new FocusNode());

        // Show Date Picker Here

      },
    )

A simple way of doing it :

Wrap TextFormField Inkwell like the below code snippet.

InkWell(
        onTap: () {
          _selectDate();   // Call Function that has showDatePicker()
        },
         child: new TextFormField(
            decoration: new InputDecoration(hintText: 'DOB'),
            maxLength: 10,
            // validator: validateDob,
            onSaved: (String val) {},
          ),
      ),

You can also try the below way:

TextEditingController dateCtl = TextEditingController();

TextFormField(
       controller: dateCtl,
       decoration: InputDecoration(
       labelText: "Date of birth",
       hintText: "Ex. Insert your dob",), 
       onTap: () async{
DateTime date = DateTime(1900);
FocusScope.of(context).requestFocus(new FocusNode());

date = await showDatePicker(
              context: context, 
              initialDate:DateTime.now(),
              firstDate:DateTime(1900),
              lastDate: DateTime(2100));

dateCtl.text = date.toIso8601String();},)

Users can also try with below code snippet.

TextEditingController intialdateval = TextEditingController();


Future _selectDate() async {
   DateTime? picked = await showDatePicker(
       context: context,
       initialDate: new DateTime.now(),
       firstDate: new DateTime(2020),
       lastDate: new DateTime(2030));
   if (picked != null)
     setState(
       () => { data.registrationdate = picked.toString(),
       intialdateval.text = picked.toString()
       }
     );
 }
TextFormField(
             // focusNode: _focusNode,
             keyboardType: TextInputType.phone,
             autocorrect: false,
             controller: intialdateval,
             onSaved: (value) {
               data.registrationdate = value;
             },
             onTap: () {
               _selectDate();
               FocusScope.of(context).requestFocus(new FocusNode());
             },
             maxLines: 1,
             //initialValue: 'Aseem Wangoo',
             validator: (value) {
               if (value.isEmpty || value.length < 1) {
                 return 'Choose Date';
               }
             },
             decoration: InputDecoration(
               labelText: 'Registration Date.',
               //filled: true,
               icon: const Icon(Icons.calendar_today),
               labelStyle:
                   TextStyle(decorationStyle: TextDecorationStyle.solid),
             ),
           ),

Output

Conclusion:

Hope you guys are enjoying our article.

Drop us your suggestion/feedback to serve you much better.

Flutter Agency is an online community dedicated to learning Flutter projects, development tips, issue resolution, news & industry updates. Consult our developer to turn your business idea into an amazing application that grows your business.