1. 基本介紹

showDatePicker员串、showTimePicker 是 flutter 提供的日期選擇器彈框盔腔。
CalendarDatePicker 是替代 YearPicker、MonthPicker琳拨、DayPicker 的新的日期選擇控件瞭恰。
CupertinoDatePicker、CupertinoTimerPicker 是 iOS 風格的 DatePickerView 和 TimePickerView 的日期時間選擇器狱庇。

2. 示例代碼

代碼下載地址寄疏。如果對你有幫助的話記得給個關(guān)注，代碼會根據(jù)我的 Flutter 專題不斷更新僵井。

3. 屬性介紹

showDatePicker屬性	介紹
context	@required BuildContext，上下文 context
initialDate	@required DateTime驳棱，日歷初始化日期 2020-10-12 藍色圓框.png
firstDate	@required DateTime批什，日歷開始日期
lastDate	@required DateTime，日歷結(jié)束日期
currentDate	DateTime 當前日期 2020-10-20 藍邊圓圈.png
initialEntryMode	DatePickerEntryMode.calendar 與 input 兩種社搅，分別為選擇器和填寫框
selectableDayPredicate	(DateTime dayTime){ return true;} 一個返回 bool 值的函數(shù)驻债，自定義哪些可選，下文會詳解
helpText	左上角文字 helpText.png
cancelText	取消按鈕文字 cancelText.png
confirmText	確認按鈕文字形葬，上圖中 confirmText
locale	地區(qū)設(shè)置合呐，以后多語言部分在詳解
useRootNavigator	是否使用根導航，默認為 true笙以，官方文檔也沒做詳解淌实，暫時沒用到
routeSettings	路由設(shè)置，官方文檔也沒做詳解猖腕，暫時沒用到
textDirection	文字方向拆祈，TextDirection，DatePickerEntryMode.input 模式時倘感，居左或者居右設(shè)置
builder	創(chuàng)建器放坏，和直接創(chuàng)建基本一致，可以定制主題
initialDatePickerMode	DatePickerMode.day 與 DatePickerMode.year 兩種
errorFormatText	格式錯誤是下方提示 errorFormatText.png
fieldHintText	輸入框默認提示語
fieldLabelText	輸入框上方提示語
errorInvalidText	輸入了不在 first 與 last 之間的日期提示語 errorInvalidText.png

showTimePicker屬性	介紹
context	@required BuildContext 上下文
initialTime	@required TimeOfDay 設(shè)置默認日期
builder	創(chuàng)建器老玛，和直接創(chuàng)建基本一致淤年，可以定制主題
initialEntryMode	默認為 TimePickerEntryMode.dial。input 樣式其實就是收起后的樣子
helpText	左上角文字 helpText.png
cancelText	取消按鈕文字 cancelText.png
confirmText	確認按鈕文字蜡豹，上圖中 confirmText
useRootNavigator	是否使用根導航麸粮，默認為 true，官方文檔也沒做詳解镜廉，暫時沒用到
routeSettings	路由設(shè)置豹休，官方文檔也沒做詳解，暫時沒用到

CalendarDatePicker屬性	介紹
initialDate	@required DateTime 初始化選中日期
firstDate	@required DateTime 最小可選日期
lastDate	@required DateTime 最大可選日期
currentDate	DateTime 當前選中日期
onDateChanged	@required 選中日期改變回調(diào)函數(shù)
onDisplayedMonthChanged	月份改變回調(diào)函數(shù)
initialCalendarMode	DatePickerMode.day 日期選擇器樣式
selectableDayPredicate	篩選日期可不可點回調(diào)函數(shù)

CupertinoTimerPicker屬性	介紹
mode	展示模式桨吊，默認為 CupertinoTimerPickerMode.hms
initialTimerDuration	默認選中事時間威根，默認為 Duration.zero
minuteInterval	分鐘間隔

secondInterval 秒間隔
alignment | 對齊方式
backgroundColor | 背景顏色
onTimerDurationChanged | @required 滑動后凤巨，每次改變回調(diào)函數(shù)

4. showDatePicker 詳解

4.1 日期選擇彈窗

import 'package:flutter/material.dart';

class FMDatePickerVC extends StatefulWidget{
  @override
  FMDatePickerState createState() => FMDatePickerState();
}

class FMDatePickerState extends State <FMDatePickerVC> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("DatePicker"),),
      body: ListView(
        padding: EdgeInsets.all(15),
        children: [
          _showDatePicker(context),
          // _showDatePickerForYear(context),
          // _showDatePickerForInput(context),
        ],
      ),
    );
  }

  RaisedButton _showDatePicker(context){
    return RaisedButton(
      child: Text("showDatePicker"),
      onPressed: (){
        showDatePicker(
            context: context,
            initialDate: DateTime.now(), // 初始化選中日期
            firstDate: DateTime(2020, 6),  // 開始日期
            lastDate: DateTime(2021, 6),  // 結(jié)束日期
            // initialEntryMode: DatePickerEntryMode.input,  // 日歷彈框樣式

            textDirection: TextDirection.ltr,  // 文字方向

            currentDate: DateTime(2020, 10, 20),  // 當前日期
            helpText: "helpText", // 左上方提示
            cancelText: "cancelText",  // 取消按鈕文案
            confirmText: "confirmText",  // 確認按鈕文案

            errorFormatText: "errorFormatText",  // 格式錯誤提示
            errorInvalidText: "errorInvalidText",  // 輸入不在 first 與 last 之間日期提示

            fieldLabelText: "fieldLabelText",  // 輸入框上方提示
            fieldHintText: "fieldHintText",  // 輸入框為空時內(nèi)部提示

            initialDatePickerMode: DatePickerMode.day, // 日期選擇模式，默認為天數(shù)選擇
            useRootNavigator: true, // 是否為根導航器
            // 設(shè)置不可選日期洛搀，這里將 2020-10-15敢茁，2020-10-16，2020-10-17 三天設(shè)置不可選
            selectableDayPredicate: (dayTime){
              if(dayTime == DateTime(2020, 10, 15) || dayTime == DateTime(2020, 10, 16) || dayTime == DateTime(2020, 10, 17)) {
                return false;
              }
              return true;
            }
        );
      },
    );
  }
}

showDatePicker day.png

4.2 年份選擇器

  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("DatePicker"),),
      body: ListView(
        padding: EdgeInsets.all(15),
        children: [
          _showDatePicker(context),
          _showDatePickerForYear(context),
         //  _showDatePickerForInput(context),
        ],
      ),
    );
  }

  RaisedButton _showDatePickerForYear(context){
    return RaisedButton(
      child: Text("showDatePicker - YearMode"),
      onPressed: (){
        showDatePicker(
          context: context,
          initialDate: DateTime.now(), // 初始化選中日期
          firstDate: DateTime(2018, 6),  // 開始日期
          lastDate: DateTime(2025, 6),  // 結(jié)束日期
          currentDate: DateTime(2020, 10, 20),  // 當前日期
          helpText: "helpText", // 左上方提示
          cancelText: "cancelText",  // 取消按鈕文案
          confirmText: "confirmText",  // 確認按鈕文案

          initialDatePickerMode: DatePickerMode.year, // 日期選擇模式留美，默認為天數(shù)選擇
        );
      },
    );
  }

showDatePicker year.png

4.3 日期輸入框

  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("DatePicker"),),
      body: ListView(
        padding: EdgeInsets.all(15),
        children: [
          _showDatePicker(context),
          _showDatePickerForYear(context),
          _showDatePickerForInput(context),
        ],
      ),
    );
  }

  RaisedButton _showDatePickerForInput(context){
    return RaisedButton(
      child: Text("showDatePicker - InputMode"),
      onPressed: (){
        showDatePicker(
            context: context,
            initialDate: DateTime.now(), // 初始化選中日期
            firstDate: DateTime(2020, 6),  // 開始日期
            lastDate: DateTime(2021, 6),  // 結(jié)束日期
            initialEntryMode: DatePickerEntryMode.input,  // 日歷彈框樣式

            textDirection: TextDirection.ltr,  // 文字方向

            currentDate: DateTime(2020, 10, 20),  // 當前日期
            helpText: "helpText", // 左上方提示
            cancelText: "cancelText",  // 取消按鈕文案
            confirmText: "confirmText",  // 確認按鈕文案

            errorFormatText: "errorFormatText",  // 格式錯誤提示
            errorInvalidText: "errorInvalidText",  // 輸入不在 first 與 last 之間日期提示

            fieldLabelText: "fieldLabelText",  // 輸入框上方提示
            fieldHintText: "fieldHintText",  // 輸入框為空時內(nèi)部提示

            initialDatePickerMode: DatePickerMode.day, // 日期選擇模式彰檬，默認為天數(shù)選擇
            useRootNavigator: true, // 是否為根導航器
            // 設(shè)置不可選日期，這里將 2020-10-15谎砾，2020-10-16逢倍，2020-10-17 三天設(shè)置不可選
            selectableDayPredicate: (dayTime){
              if(dayTime == DateTime(2020, 10, 15) || dayTime == DateTime(2020, 10, 16) || dayTime == DateTime(2020, 10, 17)) {
                return false;
              }
              return true;
            }
        );
      },
    );
  }

showDatePicker input normal.png

showDatePicker input errorFormat.png

showDatePicker input errorInvalid.png

showDatePicker input rtl.png

4.4 日期選擇器主題設(shè)置

主題 Theme 本身就是一個功能很龐大的東西，這里不多描述景图，有興趣可以自行了解较雕。

  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("DatePicker"),),
      body: ListView(
        padding: EdgeInsets.all(15),
        children: [
          _showDatePicker(context),
          _showDatePickerForYear(context),
          _showDatePickerForInput(context),
          _showDatePickerForTheme(context),
        ],
      ),
    );
  }

  RaisedButton _showDatePickerForTheme(context){
    return RaisedButton(
      child: Text("showDatePicker - InputMode"),
      onPressed: (){
        showDatePicker(
            context: context,
            builder: (context, child) {
              return Theme(
                data: ThemeData(
                  cardColor: Colors.red,
                  brightness: Brightness.dark,
                ),
                child: child,
              );
            },
          initialDate: DateTime.now(), // 初始化選中日期
          firstDate: DateTime(2018, 6),  // 開始日期
          lastDate: DateTime(2025, 6),  // 結(jié)束日期
          currentDate: DateTime(2020, 10, 20),  // 當前日期
          helpText: "helpText", // 左上方提示
          cancelText: "cancelText",  // 取消按鈕文案
          confirmText: "confirmText",  // 確認按鈕文案

          initialDatePickerMode: DatePickerMode.year, // 日期選擇模式，默認為天數(shù)選擇
        );
      },
    );
  }

showDatePicker theme.png

5. showTimePicker 詳解

和 showDatePicker 基本一樣挚币，不做贅述亮蒋。

  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("DatePicker"),),
      body: ListView(
        padding: EdgeInsets.all(15),
        children: [
          _showDatePicker(context),
          _showDatePickerForYear(context),
          _showDatePickerForInput(context),
          _showDatePickerForTheme(context),
          _showTimePicker(context),
        ],
      ),
    );
  }

  RaisedButton _showTimePicker(context){
    return RaisedButton(
      child: Text("showTimePicker - InputMode"),
      onPressed: (){
        showTimePicker(
          context: context,
          initialTime: TimeOfDay(hour: 10, minute: 30),
          cancelText: "cancelText",
          helpText: "helpText",
          confirmText: "confirmText"
        );
      },
    );
  }

showTimePicker dial.png

showTimePicker input.png

6. CalendarDatePicker 詳解

  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("DatePicker"),),
      body: ListView(
        padding: EdgeInsets.all(15),
        children: [
          _showDatePicker(context),
          _showDatePickerForYear(context),
          _showDatePickerForInput(context),
          _showDatePickerForTheme(context),
          _showTimePicker(context),
          Text("CalendarDatePicker day"),
          _calendarDatePicker(DatePickerMode.day),
          Text("CalendarDatePicker year"),
          _calendarDatePicker(DatePickerMode.year),
        ],
      ),
    );
  }

  CalendarDatePicker _calendarDatePicker(DatePickerMode mode){
    return CalendarDatePicker(
      initialDate: DateTime.now(), // 初始化選中日期
      currentDate: DateTime(2020, 10, 18),
      firstDate: DateTime(2020, 9, 10),  // 開始日期
      lastDate: DateTime(2022, 9, 10),  // 結(jié)束日期
      initialCalendarMode: mode, // 日期選擇樣式
      // 選中日期改變回調(diào)函數(shù)
      onDateChanged: (dateTime){
        print("onDateChanged $dateTime");
      },
      // 月份改變回調(diào)函數(shù)
      onDisplayedMonthChanged: (dateTime){
        print("onDisplayedMonthChanged $dateTime");
      },
      // 篩選日期可不可點回調(diào)函數(shù)
      selectableDayPredicate: (dayTime){
        if(dayTime == DateTime(2020, 10, 15) || dayTime == DateTime(2020, 10, 16) || dayTime == DateTime(2020, 10, 17)) {
          return false;
        }
        return true;
      }
    );
  }

CalendarDatePicker year and day.png

7. CupertinoTimerPicker 詳解

注意改變 mode 時，不要使用熱重載妆毕，會報錯慎玖。

  CupertinoTimerPicker _cupertinoTimePicker(CupertinoTimerPickerMode mode){
    return CupertinoTimerPicker(
      mode: mode, // 展示模式
      initialTimerDuration: Duration(hours: 5, minutes: 10), // 默認選中事時間
      minuteInterval: 10, // 分鐘間隔
      secondInterval: 10, // 秒間隔
      alignment: Alignment.center, // 對齊方式
      backgroundColor: Colors.yellow, // 背景顏色
      // 滑動后，每次改變回調(diào)函數(shù)
      onTimerDurationChanged: (dayTime){
        print("onTimerDurationChanged $dayTime");
      },
    );
  }

CupertinoTimerPicker.png

8. CupertinoDatePicker 詳解

CupertinoDatePicker 直接使用在 ListView 中會報錯笛粘，這里我用一個固定大小的 Container 作為父容器趁怔。

  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("DatePicker"),),
      body: ListView(
        padding: EdgeInsets.all(15),
        children: [
          _showDatePicker(context),
          _showDatePickerForYear(context),
          _showDatePickerForInput(context),
          _showDatePickerForTheme(context),
          _showTimePicker(context),

          Text("CalendarDatePicker day"),
          _calendarDatePicker(DatePickerMode.day),
          Text("CalendarDatePicker year"),
          _calendarDatePicker(DatePickerMode.year),

          Text("_cupertinoTimePicker - hms"),
          _cupertinoTimePicker(CupertinoTimerPickerMode.hms),
          Text("_cupertinoTimePicker - hm"),
          _cupertinoTimePicker(CupertinoTimerPickerMode.hm),
          Text("_cupertinoTimePicker - ms"),
          _cupertinoTimePicker(CupertinoTimerPickerMode.ms),

          Text("CupertinoDatePicker - dateAndTime"),
          _cupertinoDatePicker(CupertinoDatePickerMode.dateAndTime),
          Text("CupertinoDatePicker - date"),
          _cupertinoDatePicker(CupertinoDatePickerMode.date),
        ],
      ),
    );
  }

  Container _cupertinoDatePicker(CupertinoDatePickerMode mode){
    return Container(
      height: 200,
      child: CupertinoDatePicker(
        mode: mode, // 展示模式, 默認為 dateAndTime
        initialDateTime: DateTime(2020, 10, 10), // 默認選中日期
        minimumDate: DateTime(2020, 10, 10), // 最小可選日期
        maximumDate: DateTime(2021, 10, 10), // 最大可選日期

        minimumYear: 2020, // 最小可選年份
        maximumYear: 2021, // 最大可選年份

        minuteInterval: 10, // 分鐘間隔

        use24hFormat: true, // 是否采用24小時制
        backgroundColor: Colors.cyan, // 背景色

        onDateTimeChanged: (dayTime){
          print("onDateTimeChanged $dayTime");
        },
      ),
    );
  }

CupertinoDatePicker.png

9. 技術(shù)小結(jié)

日期選擇器樣式比較多，但是屬性偏少薪前，需要耐心嘗試各種不同的選擇器痕钢。

Flutter入門（33）：Flutter 組件之時間日期選擇器（DatePicker经伙，TimerPicker）詳解

Flutter入門（33）：Flutter 組件之時間日期選擇器（DatePicker啡邑，TimerPicker）詳解