Usage

The only supported way of using Anytime is with browserify.

var anytime = require('anytime')

Here’s the minimum CSS required to get Anytime functional. It’ll look pretty bare and I’m sure you’ll want to style it up. There are plenty of classes on each component that you can hook into for styling.

Creating a date/time picker:

var p = new anytime(options)

Options

Name	Type	Description	Default
`input`	HTMLInputElement	An input whose value should update when the picker’s value changes.	`null`
`anchor`	HTMLElement	An element that the picker will orient itself near when displayed. If `options.input` is not provided, this option is required.	`options.input`
`button`	HTMLElement	An element that when clicked will show/hide the picker interface.	`null`
`minYear`	Number	The earliest year that can be shown or selected in the picker interface.	`1960`
`maxYear`	Number	The latest year that can be shown or selected in the picker interface.	`2030`
`minuteIncrement`	Number	By default anytime will show every minute. Set this to 5 or 15 etc to show fewer options at greater intervals.	`1`
`offset`	Number	The distance (px) from `options.anchor` the picker interface should be displayed.	`5`
`initialValue`	Date	The initial value to set the picker’s internal value.	`null`
`initialView`	Date	Value to indicate which month/year to display when picker is first shown. If `options.initialValue` is selected, that will take precedence.	`new Date()`
`format`	String	moment-style date format string.	`'h:mma on dddd D MMMM YYYY'`
`moment`	`moment`, `moment-timezone`	By default anytime uses an instance of moment in the browser’s timezone with the English locale. If you want to use a different language or a different timezone, you must load in a locale to `moment` and/or pass in a version of `moment-timezone`.	`moment`
`timezone`	String	moment-style timezone string (e.g. 'Europe/London'). Only functions if `moment-timezone` is provided as `options.moment`!	Browser’s timezone
`showTime`	Boolean	Display the time picker portion.	`true`
`timeSliders`	Boolean	Use sliders instead of the default dropdowns for the time input.	`false`
`shortMonthNames`	Boolean	Choose whether to abbreviate month names, e.g "Jan" vs. "January".	`true`
`doneText`	String	Set the text of the button that closes the picker interface.	`'Done'`
`clearText`	String	Set the text of the button that clears the picker value and closes the picker interface.	`'Clear'`
`timeSlidersText`	String	Set the text of the label before the time sliders.	`'Time:'`
`timeSlidersHourText`	String	Set the text of the label before the hour slider.	`'Hour:'`
`timeSlidersMinuteText`	String	Set the text of the label before the minute slider.	`'Minute:'`

API

p.render()

Renders the picker interface. This method must be called before p.show() is called.

p.show()

Displays the picker interface.

p.hide()

Removes the picker interface from display.

p.toggle()

Shows the picker if it is currently hidden, hides it if currently displayed.

p.update(value or fn)

Update the internal value of the picker. This will also update the related input (if there is one).

There are two ways to update the value:

Pass a value

p.update(new Date(2015, 4, 0)) // JS Date object
p.update('2015-06-10T12:16:47.997Z') // String
p.update(null) // Clear the value

Use a function to manipulate the internal moment object

The return value is used to set the new date so you must return the moment object!

picker.update(function (m) {
  return m.add(1, 'day') // increment the day
})

p.on('change', fn)

When a value is selected (or cleared) with the picker, the change event will emit with the new value.

p.on('change', function (d) {
  // When set, d will be a date
  // When cleared d will be null
  console.log('The new date/time is…', d)
})

p.destroy()

Removes all event listeners and removes the picker interface element from the DOM.

Examples

i18n

To use Anytime in a language other than the default (English) you need to load in your desired locale to moment and pass it in as an option like so:

var moment = require('moment')
require('moment/locale/fr')
moment.locale('fr')
var picker = new anytime({ moment: moment })

If you want timezone support, you must pass in a moment-timezone instance and set the timezone option:

var moment = require('moment-timezone')
require('moment/locale/fr')
moment.locale('fr')
var picker = new anytime({ moment: moment, timezone: 'Europe/Paris' })