date pickers

Date PickersRyan J. Sullivan -- @rgs258

Datepicker?• A visual tool to help you select dates / times

Agenda• Time and Granularity• Implementations• Recommendations• More Info

Time and Granularity• Years, Months, Days• Hours, Minutes, Seconds• Quarters• Seasons

Implementations• jQUery UI Datepicker• Bootstrap Datepicker• Bootstrap 3 Date/Time Picker• Native• Angular Material Datepicker

jQUery UI DatepickerOn https://jqueryui.com/datepicker/

On our site https://whr.tn/wrds

jQUery UI Datepicker (cont.)• History: http://keith-wood.name/datepick.html• Pros: None!• j/k. it’s easy to get started: https://jqueryui.com/datepicker/• Connect two dates: http://jsfiddle.net/tj_vantoll/DkDue/

• Cons: Almost impossible to extend!• Remove days: https://jsfiddle.net/rgs258/h7bogeqx/• Years Only: https://jsfiddle.net/rgs258/d8nrbqun/• Quarters: https://jsfiddle.net/rgs258/penemtxf/• “yy” means four year date and “y” means two year date• Configuration is a trial and error nightmare

Bootstrap DatepickerOn http://eternicode.github.io/bootstrap-datepicker/

Bootstrap Datepicker (cont.)• History: http://www.eyecon.ro/bootstrap-datepicker/• Pros: Very simple to configure and implement• Basic: https://jsfiddle.net/rgs258/ur79cjLd/• Remove Days: https://jsfiddle.net/rgs258/gLoy1s4k/• Years Only: https://jsfiddle.net/rgs258/kv3wr06g/• Connect Two Dates: https://jsfiddle.net/rgs258/ksbydyqq/• Connect Two Dates, Years Only:

https://jsfiddle.net/rgs258/ksbydyqq/• Cons: no time.

Bootstrap 3 Date/Time PickerOn https://github.com/Eonasdan/bootstrap-datetimepicker

On our site https://whr.tn/wrds

Bootstrap 3 Date/Time Picker (cont.)• Pros: Has time right out of the box; very well documented;

is almost easy to set up.• Basic: https://jsfiddle.net/rgs258/pfhgg3cp/• Remove Days: https://jsfiddle.net/rgs258/47885spv/• Years Only: https://jsfiddle.net/rgs258/ut3ohx32/• Connect Two Dates: https://jsfiddle.net/rgs258/xw71Lg4a/• Connect Two Dates, Years Only: https://jsfiddle.net/rgs258/ar28zjuc/

• Other thoughts• Uses Moment.js http://momentjs.com/

• moment().format('YYYY MM DD');• moment().add('days', 7); // adds 7 days to current date

Native• An article from 2012:

https://www.tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/• No support in IE, Firefox, and

Safari – A third of the internet• …almost nothing has changed:

http://caniuse.com/#feat=input-datetime• …did dropped support for

“datetime” – one or the other: https://github.com/whatwg/html/issues/336 • There is fallback to a plugin:

http://jsfiddle.net/rgs258/6udecnpm/• …and it works on mobile

• But it’s pretty in Edge!

Angular Material Datepicker

Recommendations• I’ll use Bootstrap 3 Date/Time Picker• Bootstrap Datepicker is a good idea if you don‘t need

time AND you want DEAD SIMPLE setup• jQUery UI Datepicker is old and a PITA. But if you’re

maintaining a jQuery spaghetti site already, why not.• Native looked promising and it works well on mobile.

But Bootstrap 3 Date/Time Picker will work and be consistant everywhere

More InfoCheck out these articles:• Moment looks really neat: http://momentjs.com/• An article on JUST this subject:

http://themekraft.com/find-the-best-date-and-time-picker-to-work-nice-with-any-screen-size/

More Datepickers..• Another datetime picker: https://github.com/jtsage/jquery-mobile-datebox• Old http://www.eyecon.ro/datepicker/• Probably ok, but looks to be dying: http://amsul.ca/pickadate.js/date/• Speaking of jQuery spaghetti, here’s a time plugin for it:

http://trentrichardson.com/examples/timepicker/

Thank You• Ryan J. Sullivan• @rgs258• Deck: http://goo.gl/gOZAEd• Fiddles: jsfiddle.net/user/rgs258/

We’re hiring: whr.tn/techjobs

…I thought you should know