Using it

Browsers compatibility

Currently only 'tested' with screenshots : when both inputs date and time in example file are displayed, it has been supposed to work.

OK :

• Chrome >= 51.0.2704.103
• Firefox >= 50.0 (windows 10 and debian)
• Opera >= 46, and maybe some versions under
• Edge >= 41.16299.248.0, and maybe some versions under
• EdgeHTML >= 16.16299, and maybe some versions under
• Safari >= 11
• Iceweasel 38.6.0, and maybe some versions under
• Epiphany 3.22.7, and maybe some versions under
• Chrome >= 30.0.1599 on Mac OS X 10.8
• Firefox >= 38.0 on Mac OS X 10.8

NOT OK :

• IE

How it works

When the dateTimePicker is loaded, it will register on each input having the class "datetime". Those inputs will be hidden and replaced by one or two input for date and time. When one of those inputs is modified, the value in the "real" (the hidden one) input is updated.

Most of the html in the page is dynamically inserted and removed depending of it's necessary or not.

Only inputs can be focus, so that this dateTimePicker wont impact how you can go through your page using the tab key except with the fact that each or nearly each of your datetime input will be separated in two inputs.

The dateTimePicker of an input is set into the input.datetimepicker attribute and can be accessed from another script. It's so possible to call new DateTimePicker(input) wich will recreate the dateTimePicker, or input.datetimepicker.destroy() to remove it, or input.datetimepicker.reload() to reload it.

"change" events are dispatched by original (hidden) input when his value is modified from the datetimepicker

DOM Mutations are listened by dateTimePicker :

• Adding/removing datetime class will automatically add/remove the datetimepicker on the input.
• Editing attributes such as data-date or others on an input with a datetimepicker will make it reload automatically
• Adding/removing disabled/required attributes will also works
• Editing input.value will NOT work util you don't call input.datetimepicker.update() because some frameworks like JQuery override the value property.
• Editing formats will also make it fully reload EXCEPT for original_format which should NEVER be modified ! If you do, it will probably don't work.

Basic usage, choosing original format :

• import the dateTimePicker and moment :

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment-with-locales.min.js"></script>
<script type="text/javascript" src="path/to/datetimepicker.min.js"></script>

• Set class "datetime" to your datetime inputs and add "data-original-format="(wanted saved format)"" :

For edit and display format : date and time must be separated by 'T' or '#'

For original format : must be exactly the same that the one who's in the value of the input or into the data-default-date=""

Sample #1

<input id="1" 
	autocomplete="off" 
	data-original-format="DD/MM/YYYY HH:mm:ss" 
	class="datetime" 
	value="05/01/2018 13:05:20">

If you don't set the data-original-format in your input's html, default value will be "YYYY-MM-DDTHH:mm:ssZ"

Sample #2

<input id="1" 
	autocomplete="off" 
	class="datetime" 
	value="2018-01-05T14:20:25+01:00">

Changing display / edit format

Default format used for display and edit are : display : 'LL#LT' and edit : 'L#LT' (locale basic format) To choose using another format, you must specify it in your input's html like this :

data-format-edit="(yourEditFormat)

data-format-display="yourDisplayFormat)

You can specify only one or both, and your format must look like one of the followings :

(formatDate)T(formatTime) or (formatDate)#(formatTime) or (formatTime) or (formatDate)

if only formatDate or only formatTime is specified, then the format will be completed with missing part taken in global format defined for the page or default format if there is none

Sample #1

<!-- edit will be "05-01-2018 13" with date depending of your locale hour format -->
<!-- display be "5 Jan. 2018 13''00'ss" with date depending of your locale hour format -->
<input id="1" 
	autocomplete="off"
	data-original-format="DD/MM/YYYY HH:mm:ss"
	data-format-edit="HH"
	data-format-display="HH''mm'ss" 
	class="datetime" 
	value="05/01/2018 13:00:00">

Sample #2

<!-- edit will be "05-01-2018 13:00:00" with hour depending of your locale hour format -->
<!-- display will be "fri. 05 January 2018 13:00:00" with hour depending of your locale hour format -->
<input id="2" 
	autocomplete="off"
	data-original-format="DD/MM/YYYY HH:mm:ss"
	data-format-edit="DD-MM-YYYY"
	data-format-display="ddd DD MMMM YYYY"
	class="datetime" 
	value="05/01/2018 13:00:00">

Sample #3

<!-- edit will be "5/1 13:00" -->
<!-- display will be "fri. The #5th of Jan. 13:00" -->
<input id="3" 
	autocomplete="off"
	data-original-format="DD/MM/YYYY HH:mm:ss"
	data-format-edit="D/MTHH:mm" 
	data-format-display="ddd [The #]D [of] MMMTHH:mm" 
	class="datetime" 
	value="05/01/2018 13:00:00">

Sample #4

<!-- edit will be "5/1 13:00" -->
<!-- display will be "fri. The #5th of Jan. 13:00" -->
<input id="4" 
	autocomplete="off"
	data-original-format="DD/MM/YYYY HH:mm:ss"
	data-format-edit="D/M#HH:mm"
	data-format-display="ddd [The #]Do [of] MMM#HH:mm" 
	class="datetime" 
	value="05/01/2018 13:00:00">

Default input value (only if input value is empty)

It's possible to choose which date will be set into your input (the "real" input, who's hidden) as a default value.

By default, the value of this input will be let empty if it is, you can change it by specifying it like this :

data-default-date="2018-01-05T14:20:25+01:00" (the value must respect your original format)

You can set a specific date like this, or the keyword "now" can be used. In that case, the current date and time will be set when the page will be loaded :

data-default-date="now"

Sample #1

<!-- Here the date wont be changed because value is not empty -->
<input id="1" 
	autocomplete="off"
	data-original-format="DD/MM/YYYY HH:mm:ss"
	data-default-date="now" 
	class="datetime" 
	value="05/01/2018 13:00:00"> <!-- wont change -->

Sample #2

 <!-- Here the value is empty, so the default date will be set to "10/02/2018 13:50:20" -->
<input id="2" 
	autocomplete="off"
	data-original-format="DD/MM/YYYY HH:mm:ss"
	data-default-date="10/02/2018 13:50:20"
	class="datetime" 
	value=""> <!-- will change -->

Sample #3

 <!-- Here the value is empty, so the default date will be set to the date and time when page is loaded -->
<input id="3" 
	autocomplete="off"
	data-original-format="DD/MM/YYYY HH:mm:ss"
	data-default-date="now"
	class="datetime" 
	value=""> <!-- will change -->

Sample #4

<!-- Here the value is empty, so the default date will be set to "2018-01-05T14:20:25+01:00" -->
<input id="4" 
	autocomplete="off"
	data-default-date="2018-01-05T14:20:25+01:00" 
	class="datetime" 
	value=""> <!-- will change -->

Other possible configurations

• data-auto-close-date="false" (default is true) To choose if the popup automatically closes when you choose the finest precision (usually it's "day" when format contains it, it's month or year else)

• data-auto-redirect-date="false" (default is true)

To choose if you're automatically redirect to the next view in popup while choosing your date, for example when you choose the month, if you stay on the month choice view or if you're redirected to the day choice view

• data-live-check-date="false" (default is true)

To choose if what you're typing in the date input is live checked or not (it's automatically disabled if your format may contain characters like a format with month name, day name or '[some text]')

• data-live-check-time="false" (default is true)

To choose if what you're typing in the time input is live checked or not (it's automatically disabled if your format may contain characters like a format '[some text]')

• data-date="hide" (default is "show") / data-time="hide" (default is "show")

To choose to do not display the date/time input

• data-date="disabled" (default is "show") / data-time="disabled" (default is "show")

To choose to display the date/time input but as a disabled input. Notice that if you're input has disabled="disabled" set, both input will be set to disabled="disabled"

• data-date="readonly" (default is "show") / data-time="readonly" (default is "show")

To choose to display the date/time but only has text (a span)

• data-popup="false" (default is "classic") / data-time="icon" (default is "classic")

To choose how to open the popup : False to make it never opens, icon to display the little icon clickable to open popup, and classic to open on focus / click into input.

Setting global configuration for a page :

These configuration will be the "default" configuration for the page, setting another configuration in an input will override these default configuration

Sample #1

<script type="text/javascript">
	window.dateTimePickerDefaults = {
	autoCloseDate:    true,                   // can be true or false
	autoRedirectDate: true,                   // can be true or false
	defaultDate:      '',                     // can be '' (no default date), a date like 2018-01-05T14:20:25+01:00 (in original format), or 'now' for current date and time
	display:          'LL#LT',                // can be any wanted format
	edit:             'L#LT',                 // can be any wanted format
	liveCheckDate:    true,                   // can be true or false
	liveCheckTime:    true,                   // can be true or false
	original:         'YYYY-MM-DDTHH:mm:ssZ', // can be any wanted format
	date:             'show',                 // can be show, hide, disabled or readonly
	time:             'show',                 // can be show, hide, disabled or readonly
	popup:            'classic'
	}
</script>

<!-- Every default configuration will be inherit except default date who will be set to "now" for this input --> 
<input id="1" 
	autocomplete="off"
	data-default-date="now"
	class="datetime" 
	value=""> 

Sample #2

<script type="text/javascript">
	window.dateTimePickerDefaults = {
		original  : 'DD/MM/YYYY HH:mm:ss', // can be any wanted format
		edit      : 'DD-MM-YYYYTHH:mm:ss', // can be any wanted format
		display   : 'Do MMM YYYYTHH:mm:ss' // can be any wanted format
	}
</script>

Available formats :

| Format | Used for | Detail | |:-------:|:-------:|:----------------------------------------------------------------------------------:| | a | am / pm | | | A | AM / PM | | | d | day | number of day in week : monday --> 0/1, tuesday --> 1/2, ... (depend of your locale) | | dd | day | two letters of day name | | ddd | day | 3 letters of day name | | dddd | day | full day name | | D | day | number in month : 1, 2, .., 30, 31 | | DD | day | number in month : 01, 02, .., 30, 31 | | DDD | day | number in year : 1, 2, ..., 364, 365 | | DDDD | day | number in year : 001, 002, ..., 364, 365 | | H | hour | 0, 1, 2, ..., 22, 23 | | HH | hour | 00, 01, 02, ..., 22, 23 | | h | hour | 1, 2, .., 11, 12 (add 'a' to format to tell the difference between am and pm) | | hh | hour | 01, 02, .., 11, 12 (add 'a' to format to tell the difference between am and pm) | | l | locale | Date : date with 1, 2, ..., instead of 01, 02, ... | | ll | locale | Date : date with short month name | | L | locale | only date with 01, 02, ... | | LL | locale | Date : date with full month name | | LT | locale | Time : hours and minutes | | LTS | locale | Time : hours, minutes and seconds | | M | month | month number | | MM | month | month number | | MMM | month | 3 letters of month name | | MMMM | month | full month name | | m | minute | 0, 1, 2, .., 58, 59 | | mm | minute | 00, 01, 02, ..., 58, 59 | | o | st / nd / rd / th | Do : 1st / 2nd / 3rd / 4th / ... | | s | second | 0, 1, 2, .., 58, 59 | | ss | second | 00, 01, 02, ..., 58, 59 | | S | 1/10 second | 1, 2, .., 9 | | SS | 1/100 second | 01, 02, .., 99 | | SSS |millisecond | 001, 002, .., 999 | | | separators | for example separators like '/', ',', ':', '-', ... | | w | week | 1, 2, .., 51, 52, 53 (number in year) | | ww | week | 01, 02, .., 51, 52, 53 (number in year) | | W | week | 1, 2, .., 51, 52, 53 (number in year) | | WW | week | 01, 02, .., 51, 52, 53 (number in year) | | Y | year | full year | | YY | year | last 2 numbers of year | | YYYY | year | full year | | [yourText] | text | will be displayed as text |

Also available for original format only :

| Format | Used for | Detail |
|:-------:|:-------:|:----------------------------------------------------------------------------------:| | lll | locale | Date/Time : date with short month name + time with hour and minutes | | llll | locale | Date/Time : date with short month and day name + time with hour and minutes | | LLL | locale | Date/Time : date with full month name + time with hour and minutes | | LLLL | locale | Date/Time : date with full month and day name + time with hour and minutes |

Contributing

Requirement

Node 7.1.0

Install

npm install

Run for development (wtacher + devtools + no-minification)

npm run dev

Run for production (before commit)

npm run prod