Skip to content
a date time picker in flutter
Dart Objective-C Java
Branch: master
Clone or download
Latest commit 4f95e27 Aug 18, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example fix format Jun 27, 2019
lib fix French error Aug 18, 2019
test fix bug Aug 31, 2018
.gitattributes Initial commit Aug 30, 2018
.gitignore gitignore Dec 26, 2018
CHANGELOG.md add language Aug 7, 2019
LICENSE Initial commit Aug 30, 2018
README.md change seq of language Aug 7, 2019
main_page.png add customize example Jun 26, 2019
pubspec.yaml add language Aug 7, 2019
screen_date.png fix Aug 31, 2018
screen_datetime_chinese.png fix Aug 31, 2018
screen_datetime_dutch.png add Russian Feb 14, 2019
screen_datetime_english.png fix Aug 31, 2018
screen_datetime_russian.png add Russian Feb 14, 2019
screen_time.png fix Aug 31, 2018

README.md

Flutter Datetime Picker

(Pub) flutter_datetime_picker

A flutter date time picker inspired by flutter-cupertino-date-picker

you can choose date / time / date&time in multiple languages:

  • Arabic(ar)
  • Armenian(hy)
  • Bengali(bn)
  • Bulgarian(bg)
  • Chinese(zh)
  • Danish(da)
  • Dutch(nl)
  • English(en)
  • French(fr)
  • German(de)
  • Indonesian(id)
  • Italian(it)
  • Japanese(jp)
  • Korean(ko)
  • Persian(fa)
  • Polish (pl)
  • Portuguese(pt)
  • Russian(ru)
  • Spanish(es)
  • Turkish(tr)
  • Vietnamese(vi)

and you can also custom your own picker content

Date picker Time picker Date Time picker

International:

Date Time picker (Chinese) Date Time picker (America) Date Time picker (Dutch) Date Time picker (Russian)

Demo App

main page

Usage

FlatButton(
    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(
        'show date time picker (Chinese)',
        style: TextStyle(color: Colors.blue),
    ));

Customize

If you want to customize your own style of date time picker, there is a class called CommonPickerModel, every type of date time picker is extended from this class, you can refer to other picker model (eg. DatePickerModel), and write your custom one, then pass this model to showPicker method, so that your own date time picker will appear, it’s easy, and will perfectly meet your demand

How to customize your own picker model:

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
  String leftStringAtIndex(int index) {
    if (index >= 0 && index < 24) {
      return this.digits(index, 2);
    } else {
      return null;
    }
  }

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

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

  @override
  String leftDivider() {
    return "|";
  }

  @override
  String rightDivider() {
    return "|";
  }

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

  @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());
  }
}

Getting Started

For help getting started with Flutter, view our online documentation.

For help on editing package code, view the documentation.

You can’t perform that action at this time.