lightpick-ie
v1.0.1
Published
Javascript date range picker - lightweight, no jQuery base on Lightpick
Downloads
8
Maintainers
Readme
Lightpick
Javascript date range picker - lightweight, no jQuery
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.