hw.datepicker
A jQuery datepicker library
Menu
Usage
- Include datepicker StyleSheet
<link rel="stylesheet" href="/libs/hw.datepicker/hw.datepicker.min.css">- Include dependency: jQuery
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>- Include library's code
<script src="/libs/hw.datepicker/hw.datepicker.min.js"></script>- Initialize the datepicker for concrete input field and its trigger
<input type="text" id="hw_datepicker" /> <button id="hw_datepicker_trigger">pick</button>- And the initialization itself:
var datePicker = new DatePicker({ input: $('#hw_datepicker'), trigger: $('#hw_datepicker_trigger') }); datePicker.init();Required options
input
Type: object|jQuery|string
Input tag, which is related to the datepicker
trigger
Type: object|jQuery|string
Any HTML element by clicking on which datepicker appears
Other options
container
Type: object|jQuery|string
Default jQuery('body')
It is an HTML element, jQuery object or selector (e.g. class or id). Datepicker appears in this HTML element. I recommend to use parent element as a container, to make "tab" navigation work properly. However in most cases it is impossible, because parent might have styles which impact the datepicker, for example overflow: hidden
var datePicker = new DatePicker({ input: $('#hw_datepicker'), trigger: $('#hw_datepicker_trigger'), container: $('#hw_datepicker').parent() }); datePicker.init();minDate, maxDate
Type: Date
Default: null
Minimum and maximum date between which dates can be picked.
var minDate = new Date(); minDate.setDate(minDate.getDate() - 60); var maxDate = new Date(); maxDate.setDate(maxDate.getDate() + 1); var selectedDate = new Date(); selectedDate.setDate(selectedDate.getDate() - 90); var datePicker = new DatePicker({ input: $('#hw_datepicker'), trigger: $('#hw_datepicker_trigger'), minDate: minDate, maxDate: maxDate }); datePicker.init();startWithMonday
Type: Boolean
Default: false
The week start with Sunday by default. To make it start from Monday, set this parameter to true.
var datePicker = new DatePicker({ input: $('#hw_datepicker'), trigger: $('#hw_datepicker_trigger'), startWithMonday: true }); datePicker.init();dateFormat
Type: String
Default: dd.mm.yyyy
By default date format is "dd.mm.yyyy". However datepicker support different date formats: mm/dd/yyyy, yyyy-m-d etc. yyyy - is a 4 digit year, mm - 2 digits month, single single m - 1 or 2 digits month, dd - 2 digits day, single d - 1 or 2 digits day.
var datePicker = new DatePicker({ input: $('#hw_datepicker'), trigger: $('#hw_datepicker_trigger'), formatDate: 'mm/dd/yyyy' }); datePicker.init();events
Type: Array
Default: []
| Event Type | Description |
|---|---|
| onOpen | This event fires when datepicker appears, no matter is it the appearance or has been already closed. |
| onSelect | This event fires when user picks the date. It accepts 1 parameter - initial jQuery click event. |
| onMonthChange | This event fires when user changes month. It accepts 2 parameters: Date object and initial jQuery click event. |
| onClose | This event fires when datepicker disappears. It accepts 1 parameter - initial jQuery click event. |
| onDateFocus | This event fires when you focus any date. It accepts 2 parameter - initial jQuery click event and the date, which is focused. |
| onDestroy | This event fires in the "destroy" method before the destruction. |
var datePicker = new DatePicker({ input: $('#hw_datepicker'), trigger: $('#hw_datepicker_trigger'), events: { onMonthChange: function(){ alert('Month changed'); }, onSelect: function(){ alert('Date selected.'); }, onOpen: function(){ alert('Opened.'); }, onClose: function(){ alert('Closed.'); }, onDateFocus: function(){ alert('Date focused.'); }, onDestroy: function(){ alert('Datepicker does not exist anymore.'); } } }); datePicker.init();i18n
Type: object
Default:
{ 'prevMonth': 'Previous month', 'nextMonth': 'Next month', 'monthName': ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], 'weekNameFull': ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'], 'weekNameShort': ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'], 'currentDate': 'Current date', 'selectedDate': 'Selected date', 'currentMonth': 'Current month', 'lastAvailableDate': 'Last available date', 'firstAvailableDate': 'First available date', 'notAvailable': 'Date is not available', 'description': 'datepicker' }Keyboard navigation
Datepicker supports keyboard navigation
| Key | Action |
|---|---|
| Arrow left | next date |
| Arrow right | previous date |
| Arrow up | 1 week back |
| Arrow down | 1 week ahead |
| Home | first day of the month |
| End | last day of the month |
| Page up | 1 month back |
| Page down | 1 month ahead |
| Enter | select current date |
| Space | select current date |
| Esc | close the datepicker |
| Tab | next date until the end of the current month |
| Shift+Tab | previous date until the very first day of the month and to the buttons, which change month |
Responsive design
By default calendar appears under the input field. If there is not enough space, but the page can be scrolled down, it would be scrolled. Otherwise, calendar appears above the input field. Datepicker also adjusts its position horizontally. By default left border of calendar is on the same line as left border of input field. If the screen is too small, calendar shrinks and takes full width.
Demo page
https://hevyweb.github.io/hw.datepicker-demo
Author
Dmytro Dzyuba
License
Copyright © 2017 Dmytro Dzyuba. Software released under MIT License.
