Getting started

It takes just 3 easy steps to integrate now.datetimepicker plugin with your website:

Copy the dist folder to your working directory.

Include JavaScript and CSS files in the <head> and <body> of your HTML page:

<head>
    ...
    <link rel='stylesheet' type='text/css' href='dist/css/now.min.css'>
</head>
<body>
    ...
    <script type="text/javascript" src="dist/now.min.js"></script>
</body>

To attach a now.datetimepicker object to an element you desire, use this:

new Now({
    input: document.getElementById('picker-input')
});

You can customize your plugin with options you provide to the constructor function:

let nowInstance = new Now({
    container: document.getElementById('picker-container'),
    keyboardEvents: true,
    inline: true,
    locale: 'en',
    //etc...
});

Development server

To start the development server, run the following commands:

npm i
npm run start

Setting a date

Any date in now.datetimepicker configuration can be specified:

by a string in ISO 8601 format.
by a number, it is treated as a timestamp.
by an instance of Date.

Configuration

startDate [default: today date, type: javascript Date Object|string] – the selected start date.
endDate [default: null, type: javascript Date Object|string] – the selected end date.
minDate [default: null, type: javascript Date Object|string] – minimum selectable date.
maxDate [default: null, type: javascript Date Object|string] – maximum selectable date.
enableTimePicker [default: true, type: boolean – Enables the time picker.
defaultTime [default: '15:00', type: javascript Date Object|string] – Sets the default time that is displayed to the timepicker.
disableMinutesSwitcher [default: false, type: boolean – Disables the ability to control the change of minutes (only changing hours).
minuteStep [default: 1, type: number – The minute steps you want to show on your time picker, for example, if you set 15 as the step, you’ll get 0, 15, 30 and 45 in your minute picker.
outputFormat [default: 'MM/DD/YYYY', type: string] - the default format for showing in input, defaults to short date format of locale, for all possible inputs, look here: link.
container [default: document.body, type: DOM object] – the DOM object of the dropdowns container.
input [default: null, type: DOM Object] – the input element to update after selection, if it's null, the element that is instantiated on will be updated.
double [default: false, type: boolean] – show two months in one plugin window.
inline [default: false, type: boolean] – display as an inline input replacement instead of input dropdown.
keyboardEvents [default: false, type: boolean] – enable this if you want to add keyboard support to the calendar.
labelTo [default: null, type: string] – the title displayed in the head of picker and showing alias for the startDate (e.g. 'check-in').
labelFrom [default: null, type: string] – the title displayed in the head of picker and showing alias for the endDate (e.g. 'check-out').
mondayIsFirst [default: false, type: boolean] – if you want to start the calendars on Monday, set this to true.
singleDate [default: false, type: boolean] – if you want a single date picker, set this to true.
dateSeparator [default: '–', type: string] – if not used as a single date picker, this will be the seperator.
placeholderText [default: 'Choose a date', type: string] – the title shows the text on the place where the selected date will be.
locale [default: 'en', type: string] – locale setting, string in BCP 47 format
enableMonthSwitcher [default: true, type: boolean] – Enables the month switcher when clicking on month names.
enableYearSwitcher [default: true, type: boolean] – Enables the year switcher when clicking on years.
showHeader [default: true, type: boolean] – visibility of the part which displays the selected start and end dates.
disabledDates [default: null, type: array] – enables user to disable specific days from selection.

Events

init – event which fires after instance initialization

let nowInstance = new Now({...});

nowInstance.on('init', (nowInstance)=>{

})

show:before – event which is triggered before showing the dropdown.

let nowInstance = new Now({...});

nowInstance.on('show:before', (nowInstance)=>{

})

show:after – event which is triggered after showing the dropdown.

let nowInstance = new Now({...});

nowInstance.on('show:after', (nowInstance)=>{

})

hide:before – event which is triggered before hiding the dropdown.

let nowInstance = new Now({...});

nowInstance.on('hide:before', (nowInstance)=>{

})

hide:after – event which is triggered after hiding the dropdown.

let nowInstance = new Now({...});

nowInstance.on('hide:after', (nowInstance)=>{

})

select:before – event which is triggered before selecting the date (the input value changed).

let nowInstance = new Now({...});

nowInstance.on('select:before', (dateString)=>{
    // dateString is a string in the output format
})

select:after – event which is triggered after selecting the date (the input value changed).

let nowInstance = new Now({...});

nowInstance.on('select:after', (dateString)=>{
    // dateString is a string in the output format
})

firstDateSelect:before – event which is triggered before selecting the first date of ranges.

let nowInstance = new Now({...});

nowInstance.on('firstDateSelect:before', (dateString)=>{
    // dateString is a string in the output format
})

firstDateSelect:after – event which is triggered after selecting the first date of ranges.

let nowInstance = new Now({...});

nowInstance.on('firstDateSelect:after', (dateString)=>{
    // dateString is a string in the output format
})

secondDateSelect:before – event which is triggered before selecting the second date of ranges.

let nowInstance = new Now({...});

nowInstance.on('secondDateSelect:before', (dateString)=>{
    // dateString is a string in the output format
})

secondDateSelect:after – event which is triggered after selecting the second date of ranges.

let nowInstance = new Now({...});

nowInstance.on('secondDateSelect:after', (dateString)=>{
    // dateString is a string in the output format
})

Methods

goToNextMonth [function] - triggers the instance show the next month after the first calendar month as the first calendar.
goToPreviousMonth [function] – triggers the instance show the previous month before the first calendar month as the first calendar.
show [function] – on dropdown instances, if the dropdown is not visible, this method triggers the show method.
hide [function] – on dropdown instances, if the dropdown is visible, this method hides it.

Changelog

v1.0.0 – Released initial version.