Introduction

This is small (15kB; 1000 LOC) fully featured datepicker plugin.

You can find source code at https://github.com/kgiszczak/datepicker.

Installation

jQuery is required for this plugin to work. In your HTML file, load css and js simply by: <link rel="stylesheet" href="datepicker.min.css"><script src="datepicker.min.js"></script> Both the minified and uncompressed (for development) versions are in the /dist directory.

Usage

$('#input').datepicker();

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

You can use this plugin on input elements. It will be displayed when input is focused.

$('#datepicker').datepicker();

<a href="#" id="datepicker">show datepicker</a>

Or you can use it on any other element. It will be displayed when element is clicked.

click me to show datepicker

$('.datepicker-container').datepicker({inline: true});

<div class="datepicker-container"></div>

Datepicker can also be displayed inline.

Options

$('#datepicker').datepicker({dateFormat: 'mm/dd/yy'});
$.datepicker.setDefaults({dateFormat: 'mm/dd/yy'});

You can pass options when initializing the plugin. Or you can change defaults globally.

months

$('#datepicker').datepicker({
  months: ['Januar', 'Februar', 'März', 'April',
    'Mai', 'Juni', 'Juli', 'August', 'September',
    'Oktober', 'November', 'Dezember']
});

Names of months. Used in parsing/formatting dates.

Default value: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

monthsShort

$('#datepicker').datepicker({
  months: ['Jan', 'Feb', 'März', 'Apr', 'Mai', 'Juni',
    'Juli', 'Aug', 'Sept', 'Okt', 'Nov', 'Dez']
});

Short names of months. Used in parsing/formatting dates.

Default value: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

days

$('#datepicker').datepicker({
  days: ['Sonntag', 'Montag', 'Dienstag',
    'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag']
});

Names of days. Used in parsing/formatting dates.

Default value: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']

daysShort

$('#datepicker').datepicker({
  daysShort: ['Son', 'Mon', 'Die', 'Mit', 'Don', 'Fre', 'Sam']
});

Short names of days. Used in parsing/formatting dates.

Default value: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

daysMin

$('#datepicker').datepicker({
  daysMin: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa']
});

Min names of days. Used in parsing/formatting dates.

Default value: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']

container

$('#datepicker').datepicker({
  container: '<div class="datepicker datepicker-green" tabindex="0"></div>'
});

Container that is used for popups.

Default value: <div class="datepicker" tabindex="0"></div>

firstDay

$('#datepicker').datepicker({
  firstDay: 1
});

First day of week. By default it is set to Sunday.

Where:

• 0 - Sunday
• 1 - Monday
• 2 - Tuesday
• 3 - Wednesday
• 4 - Thursday
• 5 - Friday
• 6 - Saturday

Default value: 0

defaultDate

$('#datepicker').datepicker({
  defaultDate: new Date()
});

Date that is selected by default. Accepts single value or array of values. Value can be a string or date object.

Default value: null

If value is set on input it has preceding over defaultDate option.

altField

$('#datepicker').datepicker({
  altField: '#altInput'
});

<input id="altInput" type="text" readonly="readonly">

Alternative input that is set when date is selected. Accepts css selectors.

Default value: null

Value of this input also will be set.

dateFormat

$('#datepicker').datepicker({
  dateFormat: 'MM dd, yy'
});

Date format.

Default value: mm/dd/yy

altFormat

$('#datepicker').datepicker({
  altField: '#altInput',
  dateFormat: 'MM dd, yy',
  altFormat: 'dd-mm-yy'
});

Alternative input format.

Default value: null

When set to null, dateFormat is used.

align

$('#datepicker').datepicker({
  align: 'right-middle'
});

Popup alignment.

Default value: bottom-left

Available values are: bottom-left, bottom-center, bottom-right, top-left, top-center, top-right, left-top, left-bottom, left-middle, right-top, right-bottom, right-middle

selectOtherMonths

$('#datepicker').datepicker({
  selectOtherMonths: false
});

Allows to select days from previous or next month.

Default value: true

prevText

$('#datepicker').datepicker({
  prevText: '<'
});

Previous link text.

Default value: «

nextText

$('#datepicker').datepicker({
  nextText: '>'
});

Next link text.

Default value: »

dayFormat

$('#datepicker').datepicker({
  dayFormat: 'dd'
});

Format of days displayed on calendar.

Default value: d

dayHeaderFormat

$('#datepicker').datepicker({
  dayHeaderFormat: 'S'
});

Format of days displayed on calendar’s header.

Default value: M

Available options are: M - minimal and S - short

monthFormat

$('#datepicker').datepicker({
  monthFormat: 'm'
});

Format of months displayed on calendar.

Default value: M

rowsCount

$('#datepicker').datepicker({
  rowsCount: 'static'
});

Number of rows displayed on calendar. When set to static number of rows is allways the same, even if given month has less days.

Default value: auto

Available options are: auto and static

minDate

$('#datepicker').datepicker({
  minDate: new Date()
});

Minimal selectable date. Accepts string or date object.

Default value: null

maxDate

$('#datepicker').datepicker({
  maxDate: new Date()
});

Maximal selectable date. Accepts string or date object.

Default value: null

keyboard

$('#datepicker').datepicker({
  keyboard: false
});

Keyboard navigation.

Default value: true

selection

$('#datepicker').datepicker({
  selection: 'month',
  dateFormat: 'MM yy'
});

Choose to select days, months, or years.

Default value: day

Available options are: day, month and year

selectionMode

$('#datepicker')
  .datepicker({
    selectionMode: 'multi'
  })
  .on('selectedDate.datepicker', function(e) {
    // don't close datepicker when selection is made
    e.preventDefault();
  });

single - single date, multi - multiple dates, range - range of dates

Default value: single

Available options are: single, multi and range

separator

$('#datepicker').datepicker({
  selectionMode: 'range',
  separator: '-'
});

Separator used for displaying selected dats in multi or range mode

Default value: ,

inline

$('#datepicker-container').datepicker({
  inline: true
});

When set to true datepicker is displayed inline

Default value: false

Events

$('.datepicker')
  .datepicker()
  .on('val.datepicker', function(e) {
    console.log(e.dates);
    console.log(e.formattedDates);
  });

Events are triggered during lifecycle of datepicker. Some events (such as val.datepicker) provide additional info. You can access this info by accessing properties on event object.

$('.datepicker')
  .datepicker()
  .on('show.datepicker', function(e) {
    e.preventDefault();
  });

Events can be canceled by calling preventDefault method.

show.datepicker

(function() {
  var canShow = false;

  $('#datepicker')
    .datepicker()
    .on('show.datepicker', function(e) {
      if (!canShow) e.preventDefault();
    });

  $('#datepicker-enable').on('click', function(e) {
    e.preventDefault();
    canShow = !canShow;

    $('#datepicker').prop('placeholder', canShow ? 'will show' : "won't show");
  });
})();

<input id="datepicker" type="text" readonly="readonly" placeholder="won't show"></input>
<a id="datepicker-enable" href="">click to change that</a>

Triggered before datepicker is shown

click to change that

hide.datepicker

$('.datepicker')
  .datepicker()
  .on('hide.datepicker', function(e) {
    e.preventDefault();
  });

Triggered before datepicker is hid

val.datepicker

$('.datepicker')
  .datepicker()
  .on('val.datepicker', function(e) {
    console.log(e.dates);
    console.log(e.formattedDates);
  });

Triggered before value on input element is set.

Available properties: dates, formattedDates.

valSet.datepicker

$('.datepicker')
  .datepicker()
  .on('valSet.datepicker', function(e) {
    console.log(e.dates);
    console.log(e.formattedDates);
  });

Triggered after value on input element is set.

Available properties: dates, formattedDates

changePeriod.datepicker

$('.datepicker')
  .datepicker()
  .on('changePeriod.datepicker', function(e) {
    console.log(e.date);
    console.log(e.period);
  });

Triggered before period is changed.

Available properties: date, period

changeView.datepicker

$('.datepicker')
  .datepicker()
  .on('changeView.datepicker', function(e) {
    console.log(e.prevView);
    console.log(e.view);
  });

Triggered before view is changed.

Available properties: prevView, view

selectDate.datepicker

$('.datepicker')
  .datepicker()
  .on('selectDate.datepicker', function(e) {
    console.log(e.date);
  });

Triggered before date is selected.

Available properties: date

selectedDate.datepicker

$('.datepicker')
  .datepicker()
  .on('selectedDate.datepicker', function(e) {
    console.log(e.dates);
  });

Triggered after date is selected.

Available properties: dates

Methods

Example of usage:

$('.datepicker').datepicker('setDates', [new Date()]);

show()

$('#datepicker').datepicker()

$('#datepicker-link').on('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
  $('#datepicker').datepicker('show');
});

Shows datepicker.

Does not have effect when inline option is set to true

show datepicker

hide()

$('#datepicker')
  .datepicker()
  .on('show.datepicker', function() {
    // hide datepicker after 3 seconds
    setTimeout(function() {
      $('#datepicker').datepicker('hide');
    }, 3000);
  });

Hides datepicker.

Does not have effect when inline option is set to true

render()

Rerenders datepicker.

changeView(viewName)

  $('#datepicker-container').datepicker({inline: true});

  $('[data-change-view]').on('click', function(e) {
    e.preventDefault();
    var view = $(this).data('change-view');
    $('#datepicker-container').datepicker('changeView', view);
  });

<a data-change-view="month" href="">Show month</a>
<a data-change-view="year" href="">Show year</a>
<a data-change-view="decade" href="">Show decade</a>
<div id="datepicker-container"></div>

Chages displayed view.

View name can be one of decade, year or month

Show month    Show year    Show decade

getDates()

$('#datepicker-container').datepicker({inline: true, selectionMode: 'multi'});

$('#datepicker-container-link').on('click', function(e) {
  e.preventDefault();
  var dates = $('#datepicker-container').datepicker('getDates');
  alert(dates.map(function(e) {
    return $.datepicker.formatDate('dd-mm-yy', e);
  }).join(', '));
});

Returns array of selected dates.

Get dates

setDates(dates)

$('#datepicker-container').datepicker({inline: true, selectionMode: 'multi'});

$('#datepicker-container-link').on('click', function(e) {
  e.preventDefault();
  $('#datepicker-container').datepicker('setDates', [new Date()]);
});

Set selected dates. Accepts array of strings or date objects.

Set dates

setOptions(options)

Updates options.

Utility functions

Format string:

• d - day of month (no leading zero)
• dd - day of month (two digit)
• D - day name short
• DD - day name long
• m - month of year (no leading zero)
• mm - month of year (two digit)
• M - month name short
• MM - month name long
• y - year (two digit)
• yy - year (four digit)
• @ - Unix timestamp (ms since 01/01/1970)
• \ - escape proceeding characters
• [] - escape characters between braces
• anything else - literal text

formatDate(formatString, date)

$.datepicker.formatDate('dd-mm-yy', new Date());

parseDate(formatString, dateString)

$.datepicker.parseDate('dd-mm-yy', '01-01-2016');