技術標籤：Flutter 開發flutterandroid日期選擇日曆showDatePicker

Flutter 日期選擇控制元件使用實戰

日期選擇是 App 開發中的常見功能，本文我們將學習如何在 Flutter 中使用日期選擇控制元件。

日曆控制元件顯示的幾種方式

flutter 包含日曆和時間控制元件，有以下幾種：

1. DayPicker：已棄用。v1.15.3之後改用 CalendarDatePicker。
2. CalendarDatePicker：1.5版後面的日期選擇控制元件，替代了 YearPicker、MonthPicker、DayPicker。
3. CupertinoDatePicker、CupertinoTimerPicker：是 iOS 風格的 DatePickerView 和 TimePickerView 的日期時間選擇器。
4. showDatePicker：彈出日期選擇。
5. showTimePicker：彈出時間選擇。

其中，showDatePicker、showTimePicker 是一個函式而不是一個控制元件。

本文我們重點介紹日期選擇器，在 flutter 開發中，通常最簡單快速的方法是使用 showDatePicker 來顯示日期彈窗

CalendarDatePicker 介紹

這裡對 CalendarDatePicker 控制元件做一個簡單介紹，因為 showDatePicker 的日期選擇彈窗的內部就是用 CalendarDatePicker 來實現的。只不過 showDatePicker 幫我們做了封裝，把生成的 CalendarDatePicker 物件，封裝到了一個 Dialog 彈窗中，以方便外部呼叫。

CalendarDatePicker 主要屬性：

• initialDate：初始化選中日期。
• firstDate：可選的最早日期。
• lastDate：可選的最晚日期。
• currentDate：當前選中日期
• onDateChanged：選中日期改變回調函式
• onDisplayedMonthChanged：月份改變回調函式
• initialCalendarMode：日期選擇器樣式
• selectableDayPredicate：篩選日期可不可點回調函式

好了，我們重點來看 showDatePicker 函式。

showDatePicker

showDatePicker 是 flutter 封裝的顯示日期選擇器的一個函式呼叫。

showDatePicker 主要引數

• initialDate：初始化選中的日期。
• firstDate：可選的最早日期。
• lastDate：可選的最晚日期。
• initialDatePickerMode：day：初始化顯示天，year：初始化先選擇年。
• textDirection：文字方向。
• initialDatePickerMode：值為 DatePickerMode.day 與 DatePickerMode.year 兩種，分別是日期和年份選擇。

調起日期選擇器的方法 showDatePicker 的返回值是 Future，Future 是一個非同步型別，因此 showDatePicker 是一個非同步方法。我們在日期選擇器選則之後，想要知道被選擇的日期，以方便記錄，這個過程將以2個例項講解。

showDatePicker 實戰1

要獲取非同步方法裡面的資料，有兩種方式。第一種方式是直接在非同步方法的後面直接點語法呼叫 then。

使用 then 獲得返回值：

    _showDatePicker() async {
      showDatePicker(
        context: context,
        initialDate: _selectedDate, //初始化選中的日期
        firstDate: DateTime(1986), //可選的最早日期
        lastDate: DateTime(2022), //可選的最晚日期
      ).then((value) {
        setState(() {
          //將選中的值傳遞出來
          this._date = value;
        });
      });
    }

showDatePicker 實戰2

第二種方式是採取 async+await 的方式。

實現如下：

  _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']);
      }
    });

日期選擇器的國際化

使用上面的例子，我們就可以顯示出日期選擇器控制元件了，然而這裡還有一個問題需要解決：日期選擇器中的文字都是英文的，並沒有隨著我們的系統而改變。那麼我們如何將它改為中文顯示呢？

想要顯示成中文，這就需要國際化設定了，請參考前文《Flutter 日曆元件如何支援中文（國際化）》即可。

效果如下：

**PS：更多精彩內容，請檢視 --> 《Flutter 開發》
**PS：更多精彩內容，請檢視 --> 《Flutter 開發》
**PS：更多精彩內容，請檢視 --> 《Flutter 開發》