多个字段的 Flutter Date Picker 功能答案

【问题标题】：Flutter Date Picker function for multiple fields多个字段的 Flutter Date Picker 功能
【发布时间】：2022-01-17 18:48:01
【问题描述】：

如何将以下代码用于单功能多文本表单字段控制器来传递日期值。或者我必须在日期选择器的表单字段中为所有控制器编写多个函数？

 ....                      
                         TextFormField(
                                  decoration: inputDecoration(
                                      'Enter Start Date',
                                      'Start Date',
                                      datestartCtrl),
                                  controller: datestartCtrl,
                                  onTap: () => _selectDate(context),
                                ),
                                SizedBox(
                                  height: 10,
                                ),
                                TextFormField(
                                  decoration: inputDecoration(
                                      'Enter Finish Date',
                                      'Date Finished',
                                      datefinishCtrl),
                                  controller: datefinishCtrl,
                                  onTap: () => _selectDate(context),
                                ),
    .....
    
    Future<Null> _selectDate(BuildContext context) async {
      var selectedDate = DateTime.now();
        DateFormat formatter = DateFormat('dd MMMM yyyy');//specifies day/month/year format
        final DateTime? picked = await showDatePicker(
            context: context,
            initialDate: selectedDate,
            firstDate: DateTime(1901, 1),
            lastDate: DateTime.now());
        if (picked != null && picked != selectedDate)
          setState(() {
            selectedDate = picked;
            datestartCtrl.value = TextEditingValue(text: formatter.format(picked));//Use formatter to format selected date and assign to text field
          });
      }

【问题讨论】：

是否有任何理由使用 textformfield 来调用 datepicker？为什么不使用按钮。
因为所有的textformfields都用于Form提交数据库中的数据。

标签： flutter dart web

【解决方案1】：

文本字段代码：

TextFormField(
                                  decoration: inputDecoration(
                                      'Enter Start Date',
                                      'Start Date',
                                      datestartCtrl),
                                  controller: datestartCtrl,
                                  onTap: () => _selectDate(context,datestartCtrl),
                                ),
                                SizedBox(
                                  height: 10,
                                ),
                                TextFormField(
                                  decoration: inputDecoration(
                                      'Enter Finish Date',
                                      'Date Finished',
                                      datefinishCtrl),
                                  controller: datefinishCtrl,
                                  onTap: () => _selectDate(context,datefinishCtrl),
                                ),

日期选择器方法

 Future<Null> _selectDate(BuildContext context, TextEditingController controller) async {
          var selectedDate = DateTime.now();
            DateFormat formatter = DateFormat('dd MMMM yyyy');
            final DateTime? picked = await showDatePicker(
                context: context,
                initialDate: selectedDate,
                firstDate: DateTime(1901, 1),
                lastDate: DateTime.now());
            if (picked != null && picked != selectedDate)
              setState(() {
                selectedDate = picked;
                controller.text = picked.tostring();
              });
          }

希望您能找到解决方案！

【讨论】：

感谢您的帮助。删除 selectedDate = 选中；更改 datestartCtrl.value = TextEditingValue(text: formatter.format(picked)); to controller.value = TextEditingValue(text: formatter.format(picked));现在工作正常。

【解决方案2】：

TextFormField(
                                      decoration: inputDecoration(
                                          'Enter Start Date',
                                          'Start Date',
                                          datestartCtrl),
                                      controller: datestartCtrl,
                                      onTap: () => _selectDate(context,datestartCtrl),
                                    ),
                                    SizedBox(
                                      height: 10,
                                    ),
                                    TextFormField(
                                      decoration: inputDecoration(
                                          'Enter Finish Date',
                                          'Date Finished',
                                          datefinishCtrl),
                                      controller: datefinishCtrl,
                                      onTap: () => _selectDate(context,datefinishCtrl),
                                    ),

日期选择器方法

 Future<Null> _selectDate(BuildContext context, TextEditingController controller) async {
          var selectedDate = DateTime.now();
            DateFormat formatter = DateFormat('dd MMMM yyyy');
            final DateTime? picked = await showDatePicker(
                context: context,
                initialDate: selectedDate,
                firstDate: DateTime(1901, 1),
                lastDate: DateTime.now());
            if (picked != null && picked != selectedDate)
              setState(() {
                controller.value = TextEditingValue(text: formatter.format(picked));
              });
          }

【讨论】：