Keyboard Driven Date & Time Input Plugin With jQuery - datetime.js

File Size: 170 KB
Views Total: 4309
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Keyboard Driven Date & Time Input Plugin With jQuery - datetime.js

datetime.js is a jQuery date selector plugin used to create user-friendly, keyboard-driven, multi-language date & time inputs. 

How to use it:

1. Load the latest version of jQuery library and the jQuery datetime.js script in your webpage.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="dist/datetime.js"></script>

2. Create a normal text field for the date & time input.

<input type="text" id="basic">

3. Just call the function on the input field and done.

$('#basic').datetime()

4. Customize the datetime format.

// yy: 2-digit year  dd.M.yy 05.03.17
// yyyy  4-digits yeaar  dd.M.yyyy 05.03.2017
// M 2-digits month  dd.M.yyyy 05.03.2017
// MM  short month   dd MM yyy 05 сент. 2017 
// MMM 1-letter month  dd MMM yyyy 05 C 2017 
// MMMM  full month name dd MMMM yyyy  05 январь 2017
// L Stand-Alone month name  dd L yyyy 05 января 2017
// d 1-digit day d L yyyy  5 января 2017
// dd   2-digit day  dd L yyyy 05 января 2017
// EE   short weekday  EE dd L yyyy  чт 05 января 2017
// EEE  1-letter weekday EEE dd L yyyy Ч 5 января 2017
// EEEE   full weekday  EEEE dd L yyyy четверг 5 января 2017
// h 1-digi hour in 12 hours format   h:mm:ss  8:15:33 
// hh  2-digits hour in 12 hours format   hh:mm:ss 08:15:33 
// H 1-digit hour in 24 hours format    H:mm:ss  8:15:33
// HH  2-digit hour in 24 hours format    HH:mm:ss 08:15:33
// m 1-digit minute   hh:m:ss  08:1:03 
// mm  2-digit minute  hh:mm:ss  08:01:03 
// s 1-digit second  hh:mm:s   08:01:3
// ss  2-digit second  hh:mm:ss  08:01:03 
// a  AM/PM  hh:mm:ss a  08:01:03 AM

$('#basic').datetime({
  format:  'dd MMMM yyyy HH:mm a'
})

5. Set the current/max/min date & time.

$('#basic').datetime({
  datetime: NaN,
  locale:   navigator.language,
  format:   'dd.MM.yyyy HH:mm:ss',
  useUTC: true,
  minDate:  NaN,
  maxDate:  NaN,
  minTime:  NaN,
  maxTime:  NaN,
  onChange: function onChange(t) {}
})

Change logs:

v2.1.1 (2017-12-19)

  • Initial datetime fix

v2.0.5 (2017-12-18)

  • Fix: $('#id').hide().show() marks selection even without focus.

v2.0.1 (2017-11-14)

  • Fix zero unix time bug

v2.0.0 (2017-11-12)

  • Fixed Cannot enter numeric values

v1.2.3 (2017-08-25)

  • Extra space fix

v1.2.2 (2017-08-12)

  • Added timezoneOffset option

v1.2.1 (2017-08-09)

  • Change format of month

v1.2,0 (2017-07-24)

  • format L fix

v1.1.8 (2017-03-28)

  • Fixed: Cannot enter numeric values

v1.1.4 (2017-03-12)

  • bugfix

This awesome jQuery plugin is developed by ua9msn. For more Advanced Usages, please check the demo page or visit the official website.