Tiny Dependency-free Date Picker JS Library – Pikaday

Preview:

Description:

Pikaday is a lightweight, dependency-free JavaScript library to create a date picker component that can be appended to any DOM element. Also supports for date range and week selection.

Installation:

# NPM
$ npm install pikaday

Basic usage:

Include the core and theme CSS files in the document’s header section.

<link rel="stylesheet" href="pikaday.css">
<link rel="stylesheet" href="theme.css">

Include the JavaScript file before the closing body tag.

<script src="pikaday.js"></script>

Create a default date picker for a specific input field.

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

var picker = new Pikaday({ 
    field: document.getElementById('datepicker') 
});

Or append the date picker to any element you specify.

var field = document.getElementById('datepicker');
var picker = new Pikaday();

Defaults and localisation.

// bind the picker to a form field
field: null,
// automatically show/hide the picker on `field` focus (default `true` if `field` is set)
bound: undefined,
// position of the datepicker, relative to the field (default to bottom & left)
// ('bottom' & 'left' keywords are not used, 'top' & 'right' are modifier on the bottom/left position)
position: 'bottom left',
// automatically fit in the viewport even if it means repositioning from the position option
reposition: true,
// the default output format for `.toString()` and `field` value
format: 'YYYY-MM-DD',
// the initial date to view when first opened
defaultDate: null,
// make the `defaultDate` the initial selected value
setDefaultDate: false,
// first day of week (0: Sunday, 1: Monday etc)
firstDay: 0,
// the default flag for moment's strict date parsing
formatStrict: false,
// the minimum/earliest date that can be selected
minDate: null,
// the maximum/latest date that can be selected
maxDate: null,
// number of years either side, or array of upper/lower range
yearRange: 10,
// show week numbers at head of row
showWeekNumber: false,
// Week picker mode
pickWholeWeek: false,
// used internally (don't config outside)
minYear: 0,
maxYear: 9999,
minMonth: undefined,
maxMonth: undefined,
startRange: null,
endRange: null,
isRTL: false,
// Additional text to append to the year in the calendar title
yearSuffix: '',
// Render the month after year in the calendar title
showMonthAfterYear: false,
// Render days of the calendar grid that fall in the next or previous month
showDaysInNextAndPreviousMonths: false,
// how many months are visible
numberOfMonths: 1,
// when numberOfMonths is used, this will help you to choose where the main calendar will be (default `left`, can be set to `right`)
// only used for the first display or when a selected date is not visible
mainCalendar: 'left',
// Specify a DOM element to render the calendar in
container: undefined,
// Blur field when date is selected
blurFieldOnSelect : true,
// internationalization
i18n: {
  previousMonth : 'Previous Month',
  nextMonth     : 'Next Month',
  months        : ['January','February','March','April','May','June','July','August','September','October','November','December'],
  weekdays      : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
  weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
},
// Theme Classname
theme: null,
// events array
events: [],
// callback functions
onSelect: null,
onOpen: null,
onClose: null,
onDraw: null

API.

var picker = new Pikaday();
// Get and set date
picker.toString('YYYY-MM-DD')
// Change current view
picker.gotoDate(new Date(2014, 1))
picker.gotoToday()
picker.gotoMonth(2)
picker.nextMonth() picker.prevMonth()
picker.gotoYear()
picker.setMinDate()
picker.setMaxDate()
picker.setStartRange()
picker.setEndRange()
// Show and hide datepicker
picker.isVisible()
picker.show()
picker.adjustPosition()
picker.hide()
picker.destroy()