Upload
ryan-sullivan
View
80
Download
0
Embed Size (px)
Citation preview
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