Skip to content

shrunyan/anytime

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

anytime

NPM

A date/time picker.

Time, anyone?

I really didn't want to write this module but there are no good open source alternatives. In our CMSs at clock we have tonnes of instances where a time needs to be selected: article live dates, offer expiry dates and other scheduling.

Until now we've made-do with the bloaty jQuery UI datepicker with the hacky timepicker extension. I thought, "surely, someone must have built a decent, modular date and time picker by now?". pikaday comes close – at least it's on npm, but you still have to rely on a choice of three different forks for time picking.

So please join me, on a journey of modularity and package managed glory in creating a date/time picker once and for all!

Stay tuned.

Usage

var picker = new AnyTime(options)

Options can be the following:

  • input - DOM input element for displaying the date
  • minYear - minimum year. Defaults to 1960
  • maxYear - maximum year. Defaults to 2030
  • offset - number of pixels to offset the element top. Defaults to 5
  • initialValue - value to set the date picker to. Defaults to new Date()
  • format - moment-style date format string. Defaults to 'h:mma on dddd D MMMM YYYY'
  • timezone - moment-style timezone string (e.g. 'Europe/London'). Defaults to current timezone
  • doneText - Content to use for the done button. Defaults to "Done"
  • clearText - Content to use for the clear button. Defaults to "Clear"
  • cb - Callback function which is given a UTC timestamp string on done button click or null on clear button click

picker.render() - Renders the date picker

picker.show() - Shows the date picker

picker.hide() - Hides the date picker

picker.destroy() - Destroys the date picker instance

Internal API methods - you probably won't need these

picker.renderHeader() - Renders the header
picker.renderFooter() - Renders the footer
picker.renderTimeInput() - Renders the time input
picker.updateDisplay() - Updates the elements to reflect the internal date state
picker.showPrevMonth() - Shows the previous month
picker.showNextMonth() - Shows the next month

Credits

Licence

Copyright (c) 2014, Ben Gourley

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

About

A date/time picker

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 89.9%
  • HTML 9.1%
  • CSS 1.0%