Code Monkey home page Code Monkey logo

flutter_datetime_picker's Introduction

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:

  • Albanian(sq)
  • Arabic(ar)
  • Armenian(hy)
  • Azerbaijan(az)
  • Basque(eu)
  • Bengali(bn)
  • Bulgarian(bg)
  • Catalan(cat)
  • Chinese(zh)
  • Danish(da)
  • Dutch(nl)
  • English(en)
  • French(fr)
  • German(de)
  • Hebrew(he)
  • Indonesian(id)
  • Italian(it)
  • Japanese(jp)
  • Kazakh(kk)
  • Korean(ko)
  • Persian(fa)
  • Polish (pl)
  • Portuguese(pt)
  • Russian(ru)
  • Spanish(es)
  • Swedish(sv)
  • Thai(th)
  • Turkish(tr)
  • Vietnamese(vi)
  • Khmer(kh)

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

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(
        '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.

flutter_datetime_picker's People

Contributors

alexhartford avatar awhitford avatar bartektartanus avatar boscharnau avatar daanvandenhoek avatar deron8523114888 avatar dt-ap avatar esentis avatar espresso3389 avatar figengungor avatar gomiunik avatar ibaiimaz avatar kevgug avatar lincode avatar lykeosovandara avatar maerlynflagg avatar magtuxgit avatar martin-danhier avatar nattapat-p avatar nfuad avatar prasadsunny1 avatar realank avatar right7ctrl avatar rinlv avatar shinriyo avatar shiwano avatar sirajulhudalabs avatar thorbenpollack avatar vala-beri avatar zazo032 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

flutter_datetime_picker's Issues

AM/PM functionality?

Hi,

Does this package feature AM/PM functionality, or is it only 24 hour times? Can't find anything to make it AM/PM.

showDateTimePicker中的min和max值没有生效

DatePicker.showDateTimePicker(context,
            showTitleActions: false,
            min: DateTime(dateTime.year, dateTime.month, dateTime.day),
            max: DateTime(dateTime.year + 1, 12, 31), onConfirm: (date) {
          print('confirm $date');
        }, currentTime: dateTime, locale: LocaleType.zh);

这里的min和max两个参数只是摆设,没有发挥作用。依旧可以在弹出的picker中选择小于min的日期,或是大于max的日期

datetimepicker 除了日期的区间,能否增加一个小时分钟的区间?

之前问过这个问题,说是让我自己继承实现,我尝试去弄没有实现出来,我要的功能就是增加一个小时分钟区间,比如上班时间是8:30 到17:30,那么这就是一个区间,无论选择了哪一天,我就只能选择8:30 到17:30的时间,我没能实现这个功能,作者能否去实现一下,加两个参数?因为我觉得这个功能还是比较普遍

Reverse the Picker Support.

Hi Team,

Thanks for the fantastic library. But Right now it showing the data in YYYY MMM DD but I need the data into the reverse form first DD MMM YYYY.

I have checked your library code. But Cann't find any solution for it. So, could you guys add this support.

TIA.

Fr traduction error

Hello, I selected fr(french) local and I have november (english) instead of novembre(french).

in i18n_model.dart change line 326 (november ) by novembre :)

thank you

how to chose only Date without Time

when i chose only date without time in TextField it goes like that

12-5-2019 00:00:00:00

i want to remove this zeros

_showDateTimePicker() { DatePicker.showDatePicker(context, showTitleActions: true, onConfirm: (date) { setState( () { _signupBirthController.text = date.toString(); }, ); }, currentTime: null); }

AM/PM?

Can the plugin display AM/PM? I am looking to use the plugin to show hours, minutes and am/pm only. The documentation does not mention this, and I can't seem to see an option for it?

The method 'builder' isn't defined for the class 'CupertinoPicker'

child: CupertinoPicker.builder(
key: ValueKey(widget.pickerModel.currentMiddleIndex()),
backgroundColor: Colors.white,
scrollController: scrollController,
itemExtent: _kDatePickerItemHeight,
onSelectedItemChanged: (int index) {
selectedChangedWhenScrolling(index);
},

CommonPickerModel is not public

How exactly we can customize it, if main class is not public and variables controlling date picker are private ?

I mean I can extend model, but I cannot access private params such as:

_currentLeftIndex = 0;
_currentMiddleIndex = this.currentTime.hour;
_currentRightIndex = this.currentTime.minute;

So please change it add add customisation docs

UI界面异常

在本人的魅族m2 note和小米NOTE LTE都会出现图中的界面异常现象
WechatIMG56

本人代码

DatePicker.showDatePicker(context,
                showTitleActions: true,
                maxTime: DateTime.now(),
                minTime: DateTime(2000, 1, 1),
                locale: LocaleType.zh,
                onConfirm: (DateTime date) {
                  _timeString = DateFormat('yyyy-MM-dd').format(date);
                  _timestamp = date.millisecondsSinceEpoch;
                  print('timestamp is $_timestamp');
                  setState(() {});
                }
            );

onConfirm doesn't close the date picker when added showDialog?

onConfirm: (date) { print('confirm $date');} prints the date and closes it. But when I add show in dialog it doesn't close the date picker.

Code:

class _MyHomePageState extends State<MyHomePage> {
  GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

  _confirmDialog(BuildContext context, DateTime date) {
    return showDialog(
      context: context,
      barrierDismissible: false, // user must tap button for close dialog!
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('Selected Date'),
          content: new Text('$date'),
          actions: <Widget>[
            FlatButton(
              child: const Text('CANCEL'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
            FlatButton(
              child: const Text('ACCEPT'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            )
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: Text('Datetime Picker'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            FlatButton(
                onPressed: () {
                  DatePicker.showDatePicker(context,
                      showTitleActions: true,
                      minTime: DateTime(2018, 3, 5),
                      maxTime: DateTime(2019, 6, 7),
                      theme: DatePickerTheme(
                          backgroundColor: Colors.blue,
                          itemStyle: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                          doneStyle: TextStyle(color: Colors.white, fontSize: 16)), onChanged: (date) {
                    print('change $date in time zone ' + date.timeZoneOffset.inHours.toString());
                  }, onConfirm: (date) {
                    print('confirm $date');
                    _confirmDialog(context, date);
                  }, currentTime: DateTime.now(), locale: LocaleType.en);
                },
                child: Text(
                  'show date picker(custom theme &date time range)',
                  style: TextStyle(color: Colors.blue),
                )),

关于参数名称的建议

static void showDatePicker(
BuildContext context, {
bool showTitleActions: true,
DateTime minTime,
DateTime maxTime,

这里的showDatePicker,minTime和maxTime建议改成minDate和maxDate,会比较确切,因为约定俗成date是日期部分,time表示小时分钟部分

How to add it to my project?

It would be nice if you added installation guide in Readme. It might be obvious for others, but I'm sure many Flutter beginners like me will want to use it too.

关于datetimepicker 小时分钟的范围

这个问题之前提到过 后来作者建议我继承CommonPickerModel去实现 今天我继承了这个类,小时部分可以控制一个范围,比较容易,但是分钟部分我控制起来就有点难,不知道怎么控制,比如我的时间范围是8:30到20:30,当我选到20的时候分钟最大只能到30,我选择19分钟最大是60,交互的时候不知道怎么去控制?

Arabic language support ???

Please, add ar locale

'ar': {
    //default
    'cancel': 'إنهاء',
    'done': 'تأكيد',
    'today': 'اليوم',
    'monthShort': [
      'يناير',
      'فبراير',
      'مارس',
      'إبريل',
      'مايو',
      'يونيو',
      'يوليو',
      'أغسطس',
      'سبتمبر',
      'أكتوبر',
      'نوفمبر',
      'ديسمبر'
    ],
    'monthLong': [
      'يناير',
      'فبراير',
      'مارس',
      'إبريل',
      'مايو',
      'يونيو',
      'يوليو',
      'أغسطس',
      'سبتمبر',
      'أكتوبر',
      'نوفمبر',
      'ديسمبر'
    ],
    'day': ['الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعه', 'السبت', 'الاحد'],
    'am': 'ص',
    'pm': 'م'
  },

language

add indonesian language please

Result is not UTC

When providing a date time that is UTC you get back a date time that is UTC false.
Can you make the DateTimePicker UTC aware?

Here is my workaround:

onConfirm: (date) {
DateTime.utc(
  date.year, date.month, date.day,
  date.hour, date.minute,
 );
}

Minimum steps in time selection fields

Hello, is it possible to customise the minimum "steps" or "jumps" in the time selection fields?

For example, I would like to display the minutes field in increments of 30 minutes:

[Today] [13] [30]
[Today] [14] [00]
[Today] [14] [30]
[Today] [15] [00]

Currently, the minutes field instead displays:

[Today] [13] [30]
[Today] [13] [31]
[Today] [13] [32]
[Today] [13] [33]

Would it be possible to set a minimum time increment?

Navigator.pop()冲突

onPressed: () {
if (widget.route.onConfirm != null) {
widget.route.onConfirm(widget.pickerModel.finalTime());
}
Navigator.pop(context);
},
应该改为
onPressed: () {
Navigator.pop(context);
if (widget.route.onConfirm != null) {
widget.route.onConfirm(widget.pickerModel.finalTime());
}
},

关于可以设置时间范围的建议

DatePicker.showDateTimePicker中 我想讲小时和分钟部分做个限制 比如只能选08:00到21:00的时间范围,可以完善下么,这个很常用的场景,比如我的作业时间就是在08:00到21:00这个范围内,所以希望别人选时间的时候就得选择这个范围之内的时间

Different step for minutes

Hi, thanks for this amaizing package! I need to change the steps for minutes to 5 in 5. How can I do that? I had changed the showTimePicker few months ago but I upgrade the packages and I miss my "solution".
I did these changes on TimePickerModel:

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

It works well for select, but it fails when I open a TimePicker because it does index = currentMinute * 5 and index is usually greater than 12.

Danish language

Danish translation. Usually months/days are with lowercase letters in danish sentences, but if you feel like a capital first letter is appropriate, then it's fine.

'da': {
//Danish
'cancel': 'Annullér',
'done': 'OK',
'today': 'I dag',
'monthShort': [
'jan',
'feb',
'mar',
'apr',
'maj',
'juni',
'juli',
'aug',
'sept',
'okt',
'nov',
'dec'
],
'monthLong': [
'januar',
'februar',
'marts',
'april',
'maj',
'juni',
'juli',
'august',
'september',
'oktober',
'november',
'december'
],
'day': ['man', 'tirs', 'ons', 'tors', 'fre', 'lør', 'søn'],
'am': 'AM',
'pm': 'PM'
},
};

Documentation for Creating a custom picker is not present

Hi!
I really like the package you've created for creating a time picker
However, your documentation for extending and creating a custom picker is not at all present.
Please create documentation for creating a custom picker in your README.md in pub.dev and on github.

The lack of documentation for creating a custom picker is frustrating.

Add turkish language

Please add the TR language.

'tr': { 'cancel': 'Vazgeç', 'done': 'Tamam', 'today': 'Bugün', 'monthShort': [ 'Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık' ], 'monthLong': [ 'Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık' ], 'day': ['Pazartesi', 'Salı', 'Çarşamba', 'Perşembe', 'Cuma', 'Cumartesi', 'Pazar'], 'am': 'ÖÖ', 'pm': 'ÖS' },

This is the i18n_model values.

Modify format date

hello, how can I change the date format from "yyyy-mm-dd" to "dd-mmmm-yyyy"?
Same thing for the time picker, as change from "hh-mm-ss" to "hh-mm"?
Because I didn't find any parameter that allows me to put a pattern for the date.

Russian language

Please, add ru locale

'ru': {
    'cancel': 'Отмена',
    'done': 'Готово',
    'today': 'Сегодня',
    'monthShort': [
      'Янв',
      'Фев',
      'Март',
      'Апр',
      'Май',
      'Июнь',
      'Июль',
      'Авг',
      'Сен',
      'Окт',
      'Ноя',
      'Дек'
    ],
    'monthLong': [
      'Январь',
      'Декабрь',
      'Март',
      'Апрель',
      'Май',
      'Июнь',
      'Июль',
      'Август',
      'Сентябрь',
      'Октябрь',
      'Ноябрь',
      'Декабрь'
    ],
    'day': ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'],
    'am': 'AM',
    'pm': 'PM'
  },

Change color of text field underline and reset icon

Hi,
Thanks for publishing such a great widget. Can you add an option for specifying the color of the underline and icon colors in the text field? Or tell me how this can be done? I've tried all the standard methods like wrapping DateTimePickerFormField in a Theme, but so far nothing has worked.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.