如何仅在 Flutter 的 datepicker 中显示年份？

Posted 2023-02-23

【中文标题】如何仅在 Flutter 的 datepicker 中显示年份？

【英文标题】：How to only display the year in datepicker for Flutter?

【发布时间】：2020-09-13 06:08:16

【问题描述】：

我希望程序只要求用户输入年份。但如您所知，日期选择器要求提供完整的日期，包括月份和日期。有没有办法让用户只被问到年份？

【参考方案1】：

您可以使用此 sn-p 选择年份，它是使用警报对话框的自定义年份选择器。

  // Call this in the select year button.
  void _pickYear(BuildContext context) 
    showDialog(
      context: context,
      builder: (context) 
        final Size size = MediaQuery.of(context).size;
        return AlertDialog(
          title: Text('Select a Year'),
          // Changing default contentPadding to make the content looks better

          contentPadding: const EdgeInsets.all(10),
          content: SizedBox(
            // Giving some size to the dialog so the gridview know its bounds

            height: size.height / 3,
            width: size.width,
            //  Creating a grid view with 3 elements per line.
            child: GridView.count(
              crossAxisCount: 3,
              children: [
                // Generating a list of 123 years starting from 2022
                // Change it depending on your needs.
                ...List.generate(
                  123,
                  (index) => InkWell(
                    onTap: () 
                      // The action you want to happen when you select the year below,

                      // Quitting the dialog through navigator.
                      Navigator.pop(context);
                    ,
                    // This part is up to you, it's only ui elements
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Chip(
                        label: Container(
                          padding: const EdgeInsets.all(5),
                          child: Text(
                            // Showing the year text, it starts from 2022 and ends in 1900 (you can modify this as you like)
                            (2022 - index).toString(),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      ,
    );
  

【参考方案2】：

YearPicker 在 v1.15.3 之后被弃用。所以你可以使用

日历日期选择器， 显示日期选择器

你可以这样使用

final todayDate = DateTime.now();
showDatePicker(
          context: context,
          initialDatePickerMode: DatePickerMode.year,
          initialEntryMode: DatePickerEntryMode.calendar,
          initialDate: DateTime(todayDate.year - 18, todayDate.month, todayDate.day),
          firstDate: DateTime(todayDate.year - 90, todayDate.month, todayDate.day),
          lastDate: DateTime(todayDate.year - 18, todayDate.month, todayDate.day),
        ).then((value) 

);

所以最初将显示年份，而警报将显示日期日历。如果您仍然只想要一年，则需要制作一个自定义小部件。

【参考方案3】：

Afaik，您不能使用 datePicker 仅选择年份。但是您可以通过使用对话框和YearPicker 小部件来做到这一点。

这里是使用 YearPicker 显示对话框的示例代码（阅读评论）：

showDialog(
      context: context,
      builder: (BuildContext context) 
        return AlertDialog(
          title: Text("Select Year"),
          content: Container( // Need to use container to add size constraint.
            width: 300,
            height: 300,
            child: YearPicker(
              firstDate: DateTime(DateTime.now().year - 100, 1),
              lastDate: DateTime(DateTime.now().year + 100, 1),
              initialDate: DateTime.now(),
              // save the selected date to _selectedDate DateTime variable.
              // It's used to set the previous selected date when
              // re-showing the dialog.
              selectedDate: _selectedDate,
              onChanged: (DateTime dateTime) 
                // close the dialog when year is selected.
                Navigator.pop(context);

                // Do something with the dateTime selected.
                // Remember that you need to use dateTime.year to get the year
              ,
            ),
          ),
        );
      ,
    );