如何在文本字段的onclick上显示日期选择器而不是在颤动中的键盘？

Question

希望在单击 TextFormField 而不是键盘时显示日期选择器。我尝试过使用GestureDetector，但没有按预期工作。

DateTime _date = new DateTime.now();
TimeOfDay _time = new TimeOfDay.now();

Future<Null> _selectedDate(BuildContext context) async {
  final DateTime picked = await showDatePicker(
      context: context,
      initialDate: _date,
      firstDate: new DateTime(2016),
      lastDate: new DateTime(2019));

  if (picked != null && picked != _date) {
    print("Date selected ${_date.toString()}");
    setState(() {
      _date = picked;
    });
  }
}
 ......
new GestureDetector(

       onTap: (){
         _selectedTime(context);
             },
            child:
             new TextFormField(
              initialValue: convertToDate(_date),
                decoration: const InputDecoration(
                  icon: const Icon(Icons.calendar_today),
                  hintText: 'Enter your date of event',
                  labelText: 'Date',
                ),
                keyboardType: null,
              ),
            ),

Answer 1

您可以用AbsorbPointer 包裹您的TextFormField（请参阅documentation）。它将“吸收”孩子的传入标准行为，因此单击 TextFormField 不会执行任何操作。如果您现在使用GestureDetector 包装AbsorbPointer，您可以使用onTap() 方法来调用您的showDatePicker 方法。

DateTime selectedDate = DateTime.now();
TextEditingController _date = new TextEditingController();

Future<Null> _selectDate(BuildContext context) async {
  final DateTime picked = await showDatePicker(
      context: context,
      initialDate: selectedDate,
      firstDate: DateTime(1901, 1),
      lastDate: DateTime(2100));
  if (picked != null && picked != selectedDate)
    setState(() {
      selectedDate = picked;
      _date.value = TextEditingValue(text: picked.toString());
    });
}

// inside Widget build
GestureDetector(
  onTap: () => _selectDate(context),
  child: AbsorbPointer(
    child: TextFormField(
      controller: _date,
      keyboardType: TextInputType.datetime,
      decoration: InputDecoration(
        hintText: 'Date of Birth',
        prefixIcon: Icon(
          Icons.dialpad,
          color: _icon,
        ),
      ),
    ),
  ),
);

Answer 2

你可以用 AbsorbPointer 包裹你的 TextField ，所以你的小部件树看起来像这样：

GestureDetector(
  onTap:()=>showDialog(),
  child:AbsorbPointer(
    child: MyTextField(),
  )
)

Answer 3

这里的其他答案有许多小部件可以完成工作。但这可以通过仅使用 TextFormField 来完成。只需将小部件设置为只读（这样它就不需要输入）并然后定义一个 onTap。附加到它的控制器将从日期选择器中获取值。

首先像这样创建一个TextFormField 小部件：

TextFormField(
  readOnly: true, //this is important
  onTap: _selectDate,  //the method for opening data picker
  controller: _textcontroller,  //the controller
),

现在编写_selectDate函数：

DateTime dateTime = DateTime.now();

_selectDate() async {
  final DateTime? picked = await showDatePicker(
      context: context,
      initialDate: dateTime,
      initialDatePickerMode: DatePickerMode.day,
      firstDate: DateTime.now(),
      lastDate: DateTime(2101));
  if (picked != null) {
    dateTime = picked;
    //assign the chosen date to the controller
    _textController.text = DateFormat.yMd().format(dateTime);
  }
}

我个人认为这是最简单的解决方案。

Answer 4

TextField(
  controller: TextEditingController()
    ..text = reservationProvider.date,
  decoration: InputDecoration(
      suffixIcon: ImageIcon(
    AssetImage('images/calendar_today.png'),
    color: Colors.black,
  )),
  readOnly: true,
  onTap: () async {
    final date = await showDatePicker(
        context: context,
        firstDate: DateTime(1960),
        initialDate: DateTime.now(),
        lastDate: DateTime(2100));
    if (date != null) {
      print(date);
    }
  },
),