Date/Time input

keyboard driven experience

If you want to use version 1 of this plugin please visit https://ua9msn.github.io/datetime/v1.html

Description

It was decided to get rid of formatting dates based on patterns. Now we rely on Intl.

Options


defaults = {
  datetime: NaN,
  locale:   navigator.language,
  format:   {
      hour12:  false,
      hour:    '2-digit',
      minute:  '2-digit',
      second:  '2-digit',
      weekday: 'long',
      year:    'numeric',
      month:   'long',
      day:     'numeric',
  },
  useUTC:   true,
  minDate:  NaN,
  maxDate:  NaN,
  minTime:  NaN,
  maxTime:  NaN,
  onChange: t => {}
}
For the possible format values please visit https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat useUTC flag switches plugin to UTC time zone. If useUTC is false - the plugin will work in the current local timezone. You can pass a function callback as onChange property or subscribe to jQuery onChage event.

Methods

setTime, getTime, setOptions, destroy

$('selector').datetime('setTime', Date || timestamp || timestring );
$('selector').datetime('getTime');
$('selector').datetime('setOptions', { option: value })
$('selector').datetime('destroy')

Interactions

Plugin supports numeric input, arrow keys and mouse scroll.

Examples

Empty options

$('selector').datetime();

Default datetime

$('selector').datetime({ datetime: 0 });

Format and locale


    $('selector').datetime({
        datetime: '01/03/1976 21:53',
        locale:   'ru',
        useUTC: false,
        format:   {
            hour12:  false,
            hour:    '2-digit',
            minute:  '2-digit',
            second:  '2-digit',
            year:    'numeric',
            month:   'long',
            day:     'numeric',
        }
    });

Min and Max date


$('selector').datetime({
    datetime: Date.now(),
    minDate:  Date.now(),
    maxDate:  Date.now() + 1000 * 60 * 60
});