Flutter日期时间选择器插件flutter_datetime_picker的使用

Flutter Datetime Picker

flutter_datetime_picker 是一个由 flutter-cupertino-date-picker 启发而来的 Flutter 日期时间选择器插件。

你可以选择日期、时间或日期时间，并支持多种语言：

阿尔巴尼亚语(sq)
阿拉伯语(ar)
亚美尼亚语(hy)
阿塞拜疆语(az)
巴斯克语(eu)
孟加拉语(bn)
保加利亚语(bg)
加泰罗尼亚语(cat)
中文(zh)
丹麦语(da)
荷兰语(nl)
英语(en)
法语(fr)
德语(de)
印度尼西亚语(id)
意大利语(it)
日语(jp)
哈萨克语(kk)
韩语(ko)
波斯语(fa)
波兰语(pl)
葡萄牙语(pt)
俄语(ru)
西班牙语(es)
瑞典语(sv)
泰语(th)
土耳其语(tr)
越南语(vi)
高棉语(kh)

你还可以自定义选择器内容。

国际化示例

Demo App

使用

以下是一个简单的示例，展示如何在应用中使用 flutter_datetime_picker 插件来显示日期选择器：

TextButton(
    onPressed: () {
        DatePicker.showDatePicker(context,
            showTitleActions: true,
            minTime: DateTime(2018, 3, 5),
            maxTime: DateTime(2019, 6, 7), 
            onChanged: (date) {
                print('change $date');
            }, 
            onConfirm: (date) {
                print('confirm $date');
            }, 
            currentTime: DateTime.now(), 
            locale: LocaleType.zh);
    },
    child: Text(
        '显示日期选择器（中文）',
        style: TextStyle(color: Colors.blue),
    ));

自定义

如果你希望自定义日期时间选择器的样式，可以创建一个继承自 CommonPickerModel 的类。例如：

class CustomPicker extends CommonPickerModel {
  String digits(int value, int length) {
    return '$value'.padLeft(length, "0");
  }

  CustomPicker({DateTime? currentTime, LocaleType? locale}) : super(locale: locale) {
    this.currentTime = currentTime ?? DateTime.now();
    this.setLeftIndex(this.currentTime.hour);
    this.setMiddleIndex(this.currentTime.minute);
    this.setRightIndex(this.currentTime.second);
  }

  [@override](/user/override)
  String? leftStringAtIndex(int index) {
    if (index >= 0 && index < 24) {
      return this.digits(index, 2);
    } else {
      return null;
    }
  }

  [@override](/user/override)
  String? middleStringAtIndex(int index) {
    if (index >= 0 && index < 60) {
      return this.digits(index, 2);
    } else {
      return null;
    }
  }

  [@override](/user/override)
  String? rightStringAtIndex(int index) {
    if (index >= 0 && index < 60) {
      return this.digits(index, 2);
    } else {
      return null;
    }
  }

  [@override](/user/override)
  String leftDivider() {
    return "|";
  }

  [@override](/user/override)
  String rightDivider() {
    return "|";
  }

  [@override](/user/override)
  List<int> layoutProportions() {
    return [1, 2, 1];
  }

  [@override](/user/override)
  DateTime finalTime() {
    return currentTime.isUtc
        ? DateTime.utc(
            currentTime.year,
            currentTime.month,
            currentTime.day,
            this.currentLeftIndex(),
            this.currentMiddleIndex(),
            this.currentRightIndex())
        : DateTime(
            currentTime.year,
            currentTime.month,
            currentTime.day,
            this.currentLeftIndex(),
            this.currentMiddleIndex(),
            this.currentRightIndex());
  }
}

然后在你的应用中使用自定义的 CustomPicker：

TextButton(
    onPressed: () {
        DatePicker.showPicker(context, showTitleActions: true,
            onChanged: (date) {
                print('change $date in time zone ' + date.timeZoneOffset.inHours.toString());
            }, 
            onConfirm: (date) {
                print('confirm $date');
            },
            pickerModel: CustomPicker(currentTime: DateTime.now()), 
            locale: LocaleType.en);
    },
    child: Text(
        '显示自定义时间选择器\n你可以像这样自定义选择器模型',
        style: TextStyle(color: Colors.blue),
    ));

完整示例

import 'package:flutter/material.dart';
import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';

void main() => runApp(new MyApp());

class CustomPicker extends CommonPickerModel {
  String digits(int value, int length) {
    return '$value'.padLeft(length, "0");
  }

  CustomPicker({DateTime? currentTime, LocaleType? locale}) : super(locale: locale) {
    this.currentTime = currentTime ?? DateTime.now();
    this.setLeftIndex(this.currentTime.hour);
    this.setMiddleIndex(this.currentTime.minute);
    this.setRightIndex(this.currentTime.second);
  }

  [@override](/user/override)
  String? leftStringAtIndex(int index) {
    if (index >= 0 && index < 24) {
      return this.digits(index, 2);
    } else {
      return null;
    }
  }

  [@override](/user/override)
  String? middleStringAtIndex(int index) {
    if (index >= 0 && index < 60) {
      return this.digits(index, 2);
    } else {
      return null;
    }
  }

  [@override](/user/override)
  String? rightStringAtIndex(int index) {
    if (index >= 0 && index < 60) {
      return this.digits(index, 2);
    } else {
      return null;
    }
  }

  [@override](/user/override)
  String leftDivider() {
    return "|";
  }

  [@override](/user/override)
  String rightDivider() {
    return "|";
  }

  [@override](/user/override)
  List<int> layoutProportions() {
    return [1, 2, 1];
  }

  [@override](/user/override)
  DateTime finalTime() {
    return currentTime.isUtc
        ? DateTime.utc(
            currentTime.year,
            currentTime.month,
            currentTime.day,
            this.currentLeftIndex(),
            this.currentMiddleIndex(),
            this.currentRightIndex())
        : DateTime(
            currentTime.year,
            currentTime.month,
            currentTime.day,
            this.currentLeftIndex(),
            this.currentMiddleIndex(),
            this.currentRightIndex());
  }
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Datetime Picker'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            TextButton(
                onPressed: () {
                    DatePicker.showDatePicker(context,
                        showTitleActions: true,
                        minTime: DateTime(2018, 3, 5),
                        maxTime: DateTime(2019, 6, 7),
                        theme: DatePickerTheme(
                            headerColor: Colors.orange,
                            backgroundColor: Colors.blue,
                            itemStyle: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                                fontSize: 18),
                            doneStyle:
                                TextStyle(color: Colors.white, fontSize: 16)),
                        onChanged: (date) {
                        print('change $date in time zone ' +
                            date.timeZoneOffset.inHours.toString());
                    }, onConfirm: (date) {
                        print('confirm $date');
                    }, currentTime: DateTime.now(), locale: LocaleType.en);
                },
                child: Text(
                  '显示日期选择器（自定义主题与日期时间范围）',
                  style: TextStyle(color: Colors.blue),
                )),
            TextButton(
                onPressed: () {
                    DatePicker.showTimePicker(context, showTitleActions: true,
                        onChanged: (date) {
                        print('change $date in time zone ' +
                            date.timeZoneOffset.inHours.toString());
                    }, onConfirm: (date) {
                        print('confirm $date');
                    }, currentTime: DateTime.now());
                },
                child: Text(
                  '显示时间选择器',
                  style: TextStyle(color: Colors.blue),
                )),
            TextButton(
                onPressed: () {
                    DatePicker.showTime12hPicker(context, showTitleActions: true,
                        onChanged: (date) {
                        print('change $date in time zone ' +
                            date.timeZoneOffset.inHours.toString());
                    }, onConfirm: (date) {
                        print('confirm $date');
                    }, currentTime: DateTime.now());
                },
                child: Text(
                  '显示12小时制时间选择器（AM/PM）',
                  style: TextStyle(color: Colors.blue),
                )),
            TextButton(
                onPressed: () {
                    DatePicker.showDateTimePicker(context,
                        showTitleActions: true,
                        minTime: DateTime(2020, 5, 5, 20, 50),
                        maxTime: DateTime(2020, 6, 7, 05, 09), onChanged: (date) {
                        print('change $date in time zone ' +
                            date.timeZoneOffset.inHours.toString());
                    }, onConfirm: (date) {
                        print('confirm $date');
                    }, locale: LocaleType.zh);
                },
                child: Text(
                  '显示日期时间选择器（中文）',
                  style: TextStyle(color: Colors.blue),
                )),
            TextButton(
                onPressed: () {
                    DatePicker.showDateTimePicker(context, showTitleActions: true,
                        onChanged: (date) {
                        print('change $date in time zone ' +
                            date.timeZoneOffset.inHours.toString());
                    }, onConfirm: (date) {
                        print('confirm $date');
                    }, currentTime: DateTime(2008, 12, 31, 23, 12, 34));
                },
                child: Text(
                  '显示日期时间选择器（英语-美国）',
                  style: TextStyle(color: Colors.blue),
                )),
            TextButton(
                onPressed: () {
                    DatePicker.showDateTimePicker(context, showTitleActions: true,
                        onChanged: (date) {
                        print('change $date in time zone ' +
                            date.timeZoneOffset.inHours.toString());
                    }, onConfirm: (date) {
                        print('confirm $date');
                    },
                        currentTime: DateTime(2008, 12, 31, 23, 12, 34),
                        locale: LocaleType.nl);
                },
                child: Text(
                  '显示日期时间选择器（荷兰语）',
                  style: TextStyle(color: Colors.blue),
                )),
            TextButton(
                onPressed: () {
                    DatePicker.showDateTimePicker(context, showTitleActions: true,
                        onChanged: (date) {
                        print('change $date in time zone ' +
                            date.timeZoneOffset.inHours.toString());
                    }, onConfirm: (date) {
                        print('confirm $date');
                    },
                        currentTime: DateTime(2008, 12, 31, 23, 12, 34),
                        locale: LocaleType.ru);
                },
                child: Text(
                  '显示日期时间选择器（俄语）',
                  style: TextStyle(color: Colors.blue),
                )),
            TextButton(
                onPressed: () {
                    DatePicker.showDateTimePicker(context, showTitleActions: true,
                        onChanged: (date) {
                        print('change $date in time zone ' +
                            date.timeZoneOffset.inHours.toString());
                    }, onConfirm: (date) {
                        print('confirm $date');
                    },
                        currentTime: DateTime.utc(2019, 12, 31, 23, 12, 34),
                        locale: LocaleType.de);
                },
                child: Text(
                  '显示日期时间选择器（UTC，德语）',
                  style: TextStyle(color: Colors.blue),
                )),
            TextButton(
                onPressed: () {
                    DatePicker.showPicker(context, showTitleActions: true,
                        onChanged: (date) {
                        print('change $date in time zone ' +
                            date.timeZoneOffset.inHours.toString());
                    }, onConfirm: (date) {
                        print('confirm $date');
                    },
                        pickerModel: CustomPicker(currentTime: DateTime.now()),
                        locale: LocaleType.en);
                },
                child: Text(
                  '显示自定义时间选择器\n你可以像这样自定义选择器模型',
                  style: TextStyle(color: Colors.blue),
                )),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter日期时间选择器插件flutter_datetime_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

phonegap100 1楼•2 天前

更多关于Flutter日期时间选择器插件flutter_datetime_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter应用中使用flutter_datetime_picker插件来选择日期和时间的代码示例。

首先，确保你的pubspec.yaml文件中已经添加了flutter_datetime_picker依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_datetime_picker: ^2.0.0  # 请检查最新版本号

然后，运行flutter pub get来安装依赖。

接下来，在你的Dart文件中，你可以使用以下代码来展示日期和时间选择器：

import 'package:flutter/material.dart';
import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DateTimePickerDemo(),
    );
  }
}

class DateTimePickerDemo extends StatefulWidget {
  @override
  _DateTimePickerDemoState createState() => _DateTimePickerDemoState();
}

class _DateTimePickerDemoState extends State<DateTimePickerDemo> {
  DateTime _selectedDate;
  DateTime _selectedTime;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter DateTime Picker Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Selected Date: $_selectedDate',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                final DateTime pickedDate = await DatePicker.showDatePicker(
                  context,
                  initialDate: DateTime.now(),
                  firstDate: DateTime(2000),
                  lastDate: DateTime(2101),
                );
                if (pickedDate != null && pickedDate != _selectedDate) {
                  setState(() {
                    _selectedDate = pickedDate;
                  });
                }
              },
              child: Text('Select Date'),
            ),
            SizedBox(height: 30),
            Text(
              'Selected Time: $_selectedTime',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                final TimeOfDay pickedTime = await showTimePicker(
                  context: context,
                  initialTime: TimeOfDay.now(),
                );
                if (pickedTime != null && pickedTime != _selectedTime?.toLocal().timeOfDay) {
                  setState(() {
                    _selectedTime = DateTime(DateTime.now().year, DateTime.now().month, DateTime.now().day, pickedTime.hour, pickedTime.minute);
                  });
                }
              },
              child: Text('Select Time'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

添加了flutter_datetime_picker依赖。
创建了一个简单的Flutter应用，包含一个Scaffold，AppBar，以及一些用于显示和选择日期和时间的Text和ElevatedButton组件。
使用DatePicker.showDatePicker方法显示日期选择器，并在用户选择日期后更新状态。
使用showTimePicker方法显示时间选择器，并在用户选择时间后更新状态。

注意：flutter_datetime_picker插件提供了多种日期和时间选择器的配置选项，你可以根据需要调整DatePicker.showDatePicker和showTimePicker方法的参数。