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

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

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

Answer 2

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

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

        // Show Date Picker Here

      },
    )

Answer 3

要阻止键盘出现，您可以将 TextFormField 的 readOnly 属性设置为 true。

TextFormField(
  readOnly: true,
  ...
);

Answer 4

简单的方法：

包装你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()make lastDate: new DateTime(2020)); else中，您将得到错误。

Answer 5

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