Question

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());
}

当我单击要显示日期选择器的字段时，我创建了一个textFormField，然后在选择要在textFormField中设置所选日期的日期后，必须从选择器中选择一个日期。

Answer 1

简单的方法：

用TextFormField包裹IgnorePointer，用IgnorePointer包裹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) {},
          ),
        ),
      ),

也请在您的_selectDate()中输入lastDate: new DateTime(2020));，否则会出错。

Answer 2

我不知道您为什么要在单击TextFormField时显示DatePicker？

顺便说一句，您必须设置enabled=false的{{1}}属性并将TextFormField扭曲为具有 onTap 属性的TextFormField，您可以在其中调用DatePicker方法。

Answer 3

您可以使用 OnTap 属性来实现此目的

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

        // Show Date Picker Here

      },
    )

Answer 4

@MyDriverField

Answer 5

要停止显示键盘，可以将TextFormField的readOnly属性设置为true。

TextFormField(
  readOnly: true,
  ...
);

Answer 6

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),
             ),
           ),

Answer 7

final _dateController = useTextEditingController();

TextFormField(
  readOnly: true,
  controller: _dateController,
  decoration: InputDecoration(
    labelText: 'Date',
  ),
  onTap: () async {
    await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(2015),
      lastDate: DateTime(2025),
    ).then((selectedDate) {
      if (selectedDate != null) {
        _dateController.text =
            DateFormat('yyyy-MM-dd').format(selectedDate);
      }
    });
  },
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter date.';
    }
    return null;
  },
)

Answer 8

尝试一下！

GestureDetector(
                        onTap: () {
                          var tm = showCupertinoDatePicker(
                              firstDate:
                                  defaultDateTime.add(Duration(days: -1)),
                              lastDate: defaultDateTime.add(Duration(days: 1)),
                              context: context,
                              initialDate: newDate);
                          tm.then((selectedDate) {
                            if (selectedDate != null) {
                              setState(() {
                                newDate = selectedDate;
                              });
                              dateController.text =
                                  "${DateTimeUtils.formatDate(newDate)}";
                            }
                          });
                        },
                        child: AbsorbPointer(
                          child: TextFormField(
                              controller: dateController,
                              autofocus: false,
                              validator: ((val) {
                                if (val.trim().isEmpty) {
                                  return “Select Date";
                                }
                                return null;
                              }),
                              decoration: InputDecoration(
                                  icon: Icon(Icons.today),
                                  suffix: Text("Tap to change",
                                      style: Theme.of(context)
                                          .textTheme
                                          .caption))),
                        ),
                      ),

我正在使用所有地方的comman小部件

颤抖如何在单击textformfield时显示日期选择器

8 个答案: