【Flutter】【日期选择框】DatePickerDialog，showTimePicker和CupertinoDatePicker，CupertinoTimerPicker

---

前言

---

一、日期选择框是什么？

flutter 内置了安卓和ios 样式的日期选择框，你可以使用，当然如果觉得不好用的话，也有可以使用的第三方非插件，可以使用，具体可以到市场查阅比如：table_calendar等

二、使用步骤

1.DatePickerDialog

代码如下（示例）：
可以await 结果然后来获取到我们选择的日期

    ElevatedButton(
         onPressed: () async {
           var select_day_time = await showDatePicker(
             context: context,
             initialDate: DateTime.now(), //起始时间
             firstDate: DateTime(2020, 5, 1), //最小可以选日期
             lastDate: DateTime(2030, 5, 1), //最大可选日期
           );
           print('select_day_time$select_day_time');
         },
         child: const Text('Android')),

2.CupertinoDatePicker

IOS 的风格日期选择框
代码如下（示例）：

            ElevatedButton(
                onPressed: () {
                  showModalBottomSheet(
                      context: context,
                      builder: (context) {
                        return Container(
                            child: CupertinoDatePicker(
                                backgroundColor: Colors.indigo, //背景颜色
                                use24hFormat: true, //使用24小时制

                                initialDateTime: DateTime.now(),
                                //日期的限制
                                maximumYear: 2025,
                                minimumYear: 2021,
                                minimumDate: DateTime.now()
                                    .add(const Duration(days: -1)), //最小数值date
                                maximumDate: DateTime.now()
                                    .add(const Duration(days: 3)), //3天后的日期
                                onDateTimeChanged: (sd) {
                                  print(sd);
                                  setState(() {
                                    btn2 = "$sd";
                                  });
                                }));
                      });
                },
                child: Text(btn2)),

3.时间选择器

1.showTimePicker

            ElevatedButton(
                onPressed: () async {
                  TimeOfDay? time_day = await showTimePicker(
                      context: context, initialTime: TimeOfDay.now());
                  print('time_day$time_day');
                  setState(() {
                    selectTimeStr = "${time_day?.hour}:${time_day?.minute}";
                  });
                },
                child: Text("$timeM$selectTimeStr")),

2.CupertinoTimerPicker

            ElevatedButton(
                onPressed: () async {
                  showModalBottomSheet(
                      context: context,
                      builder: (context) {
                        return CupertinoTimerPicker(
                          mode: CupertinoTimerPickerMode.hms, //模式可以值选择时和分，或者加秒
                          minuteInterval: 1, //最小的分钟间隔
                          //设置默认的时间，路由自己设置或者是可以设置为当前数据的时分秒
                          initialTimerDuration:
                              Duration(hours: 2, minutes: 10, seconds: 54),
                          onTimerDurationChanged: (stime) {
                            print("$stime");
                            setState(() {
                              selectTimeStr2 = "$stime";
                            });
                          },
                        );
                      });
                },
                child: Text("$timeM2$selectTimeStr2"))

4.显示为中文

• 因为本身这些widget 是有做国际化的处理的，那么就可以来让他显示为中文
• 导入intl

dependencies:
  flutter:
    sdk: flutter
  intl: ^0.17.0

    return MaterialApp(
      title: 'Flutter Demo',
      locale: Locale('zh', 'CH'),//默认是中文
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('zh', 'CH'),//支持列表，中文
        const Locale('en', 'US'),//支持列表，英文
      ],
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );

---

总结

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      locale: Locale('zh', 'CH'),
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('zh', 'CH'),
        const Locale('en', 'US'),
      ],
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  String btn1 = '选择日期showDatePicker';
  String btn2 = '选择日期CupertinoDatePicker';
  String timeM = "时间选择 Material=>";
  String selectTimeStr = '';

  String timeM2 = "时间选择 Cupertino=>";
  String selectTimeStr2 = '';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            ElevatedButton(
                onPressed: () async {
                  DateTime? select_day_time = await showDatePicker(
                    context: context,
                    initialDate: DateTime.now(), //起始时间
                    firstDate: DateTime(2020, 5, 1), //最小可以选日期
                    lastDate: DateTime(2030, 5, 1), //最大可选日期
                  );
                  print('select_day_time${select_day_time}');
                  setState(() {
                    btn1 =
                        "${select_day_time?.year}-${select_day_time?.month}-${select_day_time?.day}";
                  });
                },
                child: Text(btn1)),
            ElevatedButton(
                onPressed: () {
                  showModalBottomSheet(
                      context: context,
                      builder: (context) {
                        return Container(
                            child: CupertinoDatePicker(
                                backgroundColor: Colors.indigo, //背景颜色
                                use24hFormat: true, //使用24小时制

                                initialDateTime: DateTime.now(),
                                //日期的限制
                                maximumYear: 2025,
                                minimumYear: 2021,
                                minimumDate: DateTime.now()
                                    .add(const Duration(days: -1)), //最小数值date
                                maximumDate: DateTime.now()
                                    .add(const Duration(days: 3)), //3天后的日期
                                onDateTimeChanged: (sd) {
                                  print(sd);
                                  setState(() {
                                    btn2 = "$sd";
                                  });
                                }));
                      });
                },
                child: Text(btn2)),
            ElevatedButton(
                onPressed: () async {
                  TimeOfDay? time_day = await showTimePicker(
                      context: context, initialTime: TimeOfDay.now());
                  print('time_day$time_day');
                  setState(() {
                    selectTimeStr = "${time_day?.hour}:${time_day?.minute}";
                  });
                },
                child: Text("$timeM$selectTimeStr")),
            ElevatedButton(
                onPressed: () async {
                  showModalBottomSheet(
                      context: context,
                      builder: (context) {
                        return CupertinoTimerPicker(
                          mode: CupertinoTimerPickerMode.hms, //模式可以值选择时和分，或者加秒
                          minuteInterval: 1, //最小的分钟间隔
                          //设置默认的时间，路由自己设置或者是可以设置为当前数据的时分秒
                          initialTimerDuration:
                              Duration(hours: 2, minutes: 10, seconds: 54),
                          onTimerDurationChanged: (stime) {
                            print("$stime");
                            setState(() {
                              selectTimeStr2 = "$stime";
                            });
                          },
                        );
                      });
                },
                child: Text("$timeM2$selectTimeStr2"))
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

欢迎关注，留言，咨询，交流！