Logo

Flutter how to display datepicker when textformfield is clicked

new TextFormField(
    decoration: new InputDecoration(hintText: 'DOB'),
    maxLength: 10,
    validator: validateDob,
    onSaved: (String val) {
        strDob = val;
    },
),

Future _selectDate() async {
    DateTime picked = await showDatePicker(
        context: context,
        initialDate: new DateTime.now(),
        firstDate: new DateTime(2016),
        lastDate: new DateTime(2019)
    );
    if(picked != null) setState(() => _value = picked.toString());
}

I created one textFormField when i click the field i want to display datepicker then i have to select one date from the picker after selecting the date i want to set the selected date in the textFormField.

Solution to answer:

Update 2020:

As pointed by another answer @Lekr0 this can now 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

      },
    )

Original Answer:

Simple Way of Doing it :

Wrap your TextFormField with IgnorePointer & wrap IgnorePointer with InkWell

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

Also in Your _selectDate() make lastDate: new DateTime(2020)); else you will get error.

messageCircle