Getting started

It takes just 3 easy steps to integrate When.datepicker 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/when.min.css'>
</head>
<body>
    ...
    <script type="text/javascript" src="dist/when.min.js"></script>
</body>

To attach a When.datepicker object to an element you desire, use this:

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

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

let whenInstance = new When({
    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 When.datepicker 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.
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 whenInstance = new When({...});

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

})

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

let whenInstance = new When({...});

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

})

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

let whenInstance = new When({...});

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

})

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

let whenInstance = new When({...});

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

})

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

let whenInstance = new When({...});

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

})

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

let whenInstance = new When({...});

whenInstance.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 whenInstance = new When({...});

whenInstance.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 whenInstance = new When({...});

whenInstance.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 whenInstance = new When({...});

whenInstance.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 whenInstance = new When({...});

whenInstance.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 whenInstance = new When({...});

whenInstance.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.