用于多个字段的 Flutter Date Picker 功能

Question

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

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

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

希望您找到了解决方案！

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

用于多个字段的 Flutter Date Picker 功能

Flutter Date Picker function for multiple fields

web

dart

flutter