Flutter date selection control use actual combat

Flutter date selection control use actual combat

---

Date selection is a common function in App development. In this article, we will learn how to use date selection controls in Flutter.

Several ways of calendar control display

Flutter contains calendar and time controls, there are the following:

1. DayPicker: Deprecated. Use CalendarDatePicker after v1.15.3.
2. CalendarDatePicker: The date selection control after version 1.5 replaces YearPicker, MonthPicker, and DayPicker.
3. CupertinoDatePicker, CupertinoTimerPicker: is the date and time picker for DatePickerView and TimePickerView in iOS style.
4. showDatePicker: Pop up date selection.
5. showTimePicker: Pop up time selection.

Among them, showDatePicker and showTimePicker are functions rather than controls.

In this article, we focus on the date picker. In flutter development, the easiest and fastest way is usually to use showDatePicker to display the date popup

Introduction to CalendarDatePicker

Here is a brief introduction to the CalendarDatePicker control, because the inside of the showDatePicker's date selection pop-up window is implemented by CalendarDatePicker. It's just that showDatePicker helped us to encapsulate the generated CalendarDatePicker object into a Dialog pop-up window to facilitate external calls.

Main attributes of CalendarDatePicker:

• initialDate: Initialize the selected date.
• firstDate: The earliest date that can be selected.
• lastDate: Optional latest date.
• currentDate: the currently selected date
• onDateChanged: the selected date change callback function
• onDisplayedMonthChanged: callback function for month change
• initialCalendarMode: date picker style
• selectableDayPredicate: callback function for selecting dates

Well, let's focus on the showDatePicker function.

showDatePicker

showDatePicker is a function call of the display date picker encapsulated by flutter.

showDatePicker main parameters

• initialDate: Initialize the selected date.
• firstDate: The earliest date that can be selected.
• lastDate: Optional latest date.
• initialDatePickerMode: day: Initially display the day, year: Initially select the year.
• textDirection: text direction.
• initialDatePickerMode: The value is DatePickerMode.day and DatePickerMode.year, which are date and year selections.

The return value of the showDatePicker method that calls up the date picker is Future, which is an asynchronous type, so showDatePicker is an asynchronous method. After selecting the date selector, we want to know the selected date to facilitate recording. This process will be explained with two examples.

showDatePicker actual combat 1

There are two ways to get the data in the asynchronous method. The first way is to call then directly after the asynchronous method.

Use then to get the return value:

    _showDatePicker() async {
      showDatePicker(
        context: context,
        initialDate: _selectedDate, //初始化选中的日期
        firstDate: DateTime(1986), //可选的最早日期
        lastDate: DateTime(2022), //可选的最晚日期
      ).then((value) {
        setState(() {
          //将选中的值传递出来
          this._date = value;
        });
      });
    }

showDatePicker actual combat 2

The second way is to take the async+await way.

The implementation is as follows:

  _showDataPicker(int type) async {
    var picker = await showDatePicker(
        context: context,
        initialDate: DateTime.now(),
        firstDate: DateTime(1986),
        lastDate: DateTime(DateTime.now().year+2),
        locale: Locale("zh"));//这里使用了国际化
    setState(() {
      if(picker != null){
        _timeTxt.text = dataFormat.formatDate(picker, ['yyyy', '-', 'mm', '-', 'dd']);
      }
    });

Internationalization of date pickers

Using the above example, we can display the date picker control, but there is another problem that needs to be solved: the text in the date picker is all in English, and it has not changed with our system. So how do we change it to Chinese display?

If you want to display it in Chinese, you need internationalization settings. Please refer to the previous article "How Flutter Calendar Component Supports Chinese (Internationalization)" .

The effect is as follows:

---

**PS: For more exciting content, please check --> "Flutter Development"
**PS: For more exciting content, please check --> "Flutter Development"
**PS: For more exciting content, please check --> "Flutter Development"