Lightpick

Javascript date range picker - lightweight, no jQuery

screenshot

Demo & Docs

Dependencies

Moment.js

Installation

npm install lightpick

or you can download and include Moment.js and Lightpick files manually.

Usage

Lightpick can be bound to an input field:

<input type="text" id="datepicker"/>

Include Lightpick script to the end of your document:

<script src="lightpick.js"></script>  
<script>  
var picker = new Lightpick({ field: document.getElementById('datepicker') });  
</script>

Configuration

field

Type: Element
Default: null

Bind the datepicker to a form field

secondField

Type: Element
Default: null

If exists then end of date range will set here.

firstDay

Type: Number
Default: 1

ISO day of the week (1: Monday, ..., 7: Sunday).

parentEl

Type: String
Default: body

Selector of the parent element that the date range picker will be added to, if not provided this will be 'body'.

lang

Type: String
Default: auto

Language code for names of days, months by Date.prototype.toLocaleString(). 'auto' will try detect user browser language.

format

Type: String
Default: DD/MM/YYYY

The default output format.

separator

Type: String
Default: -

Separator between dates when one field.

numberOfMonths

Type: Number
Default: 1

Number of visible months.

numberOfColumns

Type: Number
Default: 2

Number of columns months.

singleDate

Type: Boolean
Default: true

Choose a single date instead of a date range.

autoclose

Type: Boolean
Default: true

Close calendar when picked date/range.

hideOnBodyClick

Type: Boolean
Default: true

Close calendar when clicked outside the elements specified in field or parentEl. Recommended use when autoclose is set to false.

repick

Type: Boolean
Default: false

Repick start/end instead of new range. This option working only when exists secondField.

minDate

Type: moment|String|Number|Date
Default: null

The minimum/earliest date that can be selected. Any format: moment() or '2018-06-01' or 1527811200000, new Date()

maxDate

Type: moment|String|Number|Date
Default: null

The maximum/latest date that can be selected. Any format: moment() or '2018-06-01' or 1527811200000, new Date()

disableDates

Type: Array
Default: null

Array of disabled dates. Array can contains ranges, allowed the same format as in options minDate, maxDate. Ex.: \[moment().startOf('month'), \['2018-06-23', '2018-06-30'\]\]

selectForward

Type: Boolean
Default: false

Select second date after the first selected date.

selectBackward

Type: Boolean
Default: false

Select second date before the first selected date.

minDays

Type: Number
Default: null

The minimum days of the selected range.

maxDays

Type: Number
Default: null

The maximum days of the selected range.

locale

Type: Object
Default: { buttons: { prev: '<', next: '>', close: '×'}, tooltip: ['day', 'days'] }

Text for buttons, tooltip.

onSelect

Type: Function
Default: null

Callback function for when a date is selected.

onOpen

Type: Function
Default: null

Callback function for when the picker becomes visible.

onClose

Type: Function
Default: null

Callback function for when the picker is hidden.

Methods

picker.setDate(date)

Set date when singleDate is true. date can be moment, string, number, date.
Ex. picker.setDate(new Date());

picker.setDateRange(start, end)

Set date range. start, end can be moment, string, number, date. Ex. picker.setDateRange(new Date(), moment().add(7, 'day'));

picker.setDisableDates(array)

array of disabled dates. Array can contains ranges, allowed moment, string, number, date. Ex. picker.setDisableDates([ moment().startOf('month'), ['2018-06-23', '2018-06-30'] ]);

picker.getDate()

Return current date as moment object.

picker.getStartDate()

Return current start of date range as moment object.

picker.getEndDate()

Return current start of date range as moment object.

picker.toString('YYYY-MM-DD')

Returns the date in a string format.

picker.reloadOptions({})

Update picker options.

picker.show()

Make the picker visible.

picker.hide()

Hide the picker.

picker.destroy()

Hide the picker and remove all event listeners.

lightpick-ie