Flutter日期时间选择器插件pkb_datetime

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

PKB Datetime Picker

从Pub分叉了flutter_datetime_picker，因为它在dart 3.0/Flutter 3.10中存在问题。

该插件仅适用于Flutter >=3.10.0。如果您需要一个更旧的版本，请使用原始插件。

Pub

文档

这是一个受Cupertino日期选择器启发的Flutter日期时间选择器。

您可以选择多种语言的日期、时间或日期时间：

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

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

国际化

日期时间选择器（中文）	日期时间选择器（美国）	日期时间选择器（荷兰）	日期时间选择器（俄语）

示例应用

使用方法

TextButton(
    onPressed: () {
        picker.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: picker.LocaleType.zh);
    },
    child: Text(
        '显示日期时间选择器（中文）',
        style: TextStyle(color: Colors.blue),
    ));

自定义

如果您想自定义日期时间选择器的样式，可以使用名为CommonPickerModel的类。每种类型的日期时间选择器都是从这个类派生的，您可以参考其他选择器模型（如DatePickerModel），然后编写自己的自定义模型，并将其传递给showPicker方法，这样您的自定义日期时间选择器就会出现，非常简单，且能够完美满足您的需求。

如何自定义您的选择器模型：

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

  CustomPicker({DateTime? currentTime, picker.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());
  }
}

开始使用

对于如何开始使用Flutter，查看我们的在线文档。

对于如何编辑包代码，查看我们的文档。

完整示例代码

import 'package:flutter/material.dart';
import 'package:pkb_datetime_picker/pkb_datetime_picker.dart' as picker;

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

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

  CustomPicker({DateTime? currentTime, picker.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: [
            TextButton(
                onPressed: () {
                  picker.DatePicker.showDatePicker(context,
                      showTitleActions: true,
                      minTime: DateTime(2018, 3, 5),
                      maxTime: DateTime(2019, 6, 7),
                      theme: picker.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: picker.LocaleType.en);
                },
                child: Text(
                  '显示日期选择器（自定义主题与日期时间范围）',
                  style: TextStyle(color: Colors.blue),
                )),
            TextButton(
                onPressed: () {
                  picker.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: () {
                  picker.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: () {
                  picker.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: picker.LocaleType.zh);
                },
                child: Text(
                  '显示日期时间选择器（中文）',
                  style: TextStyle(color: Colors.blue),
                )),
            TextButton(
                onPressed: () {
                  picker.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: () {
                  picker.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: picker.LocaleType.nl);
                },
                child: Text(
                  '显示日期时间选择器（荷兰语）',
                  style: TextStyle(color: Colors.blue),
                )),
            TextButton(
                onPressed: () {
                  picker.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: picker.LocaleType.ru);
                },
                child: Text(
                  '显示日期时间选择器（俄语）',
                  style: TextStyle(color: Colors.blue),
                )),
            TextButton(
                onPressed: () {
                  picker.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: picker.LocaleType.de);
                },
                child: Text(
                  '显示日期时间选择器（德国，UTC）',
                  style: TextStyle(color: Colors.blue),
                )),
            TextButton(
                onPressed: () {
                  picker.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: picker.LocaleType.en);
                },
                child: Text(
                  '显示自定义时间选择器\n你可以像这样自定义选择器模型',
                  style: TextStyle(color: Colors.blue),
                )),
            TextButton(
                onPressed: () {
                  picker.DatePicker.showDatePicker(context,
                      locale: picker.LocaleType.th,
                      // buddhistCalendar: false,
                      // currentTime: DateTime(DateTime.now().year -50),
                      // minTime: DateTime(DateTime.now().year - 100),
                      maxTime: DateTime(DateTime.now().year + 2),
                      onChanged: (date) {
                        print('change $date ');
                      }
                  );
                  // if (newDateTime != null) {
                  //   String date = '';
                  //   date =
                  //   '${newDateTime.day.toString()}/${newDateTime.month.toString()}/${(newDateTime.year - 1).toString()}';
                  //   print(date);
                  // }
                },
                child: Text(
                  'pkb datetime',
                  style: TextStyle(color: Colors.blue),
                )),
          ],
        ),
      ),
    );
  }
}

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

phonegap100 1楼

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

pkb_datetime_picker 是一个用于 Flutter 的日期和时间选择器插件。它提供了简单易用的方式来选择日期和时间，并且支持自定义样式和格式。以下是如何使用 pkb_datetime_picker 插件的步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 pkb_datetime_picker 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  pkb_datetime_picker: ^1.0.0  # 请使用最新版本

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

2. 导入包

在你的 Dart 文件中导入 pkb_datetime_picker 包：

import 'package:pkb_datetime_picker/pkb_datetime_picker.dart';

3. 使用日期时间选择器

你可以使用 PKBDateTimePicker 来显示日期和时间选择器。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DateTimePickerExample(),
    );
  }
}

class DateTimePickerExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DateTime Picker Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            final DateTime? pickedDate = await PKBDateTimePicker.showDateTimePicker(
              context,
              initialDate: DateTime.now(),
              firstDate: DateTime(2000),
              lastDate: DateTime(2100),
              dateFormat: 'yyyy-MM-dd',
              timeFormat: 'HH:mm',
              locale: 'zh',
            );

            if (pickedDate != null) {
              print('Picked Date: $pickedDate');
            }
          },
          child: Text('Pick Date and Time'),
        ),
      ),
    );
  }
}