joshsalverda / datepickr

A simple JavaScript date picker (this codebase isn't maintained at the moment and probably requires a complete rewrite to be useful)

Note: This codebase isn't maintained anymore and probably requires a complete rewrite to be useful

Keeping the code here for reference purposes, but don't use this for a new project, use something like https://flatpickr.js.org/ or https://duetds.github.io/date-picker/

datepickr

A simple JavaScript date picker

Sample implementations: http://joshsalverda.github.io/datepickr

Introduction

A simple, powerful, lightweight (only 6KB minified, 8KB including CSS), feature-packed date picker with no external dependencies.

A lot has changed since the last version, hopefully for the better. Many new features and some bug fixes.

Details

The simplest method to get up and running:

datepickr('#inputElementId');

Obviously replace 'inputElementId' with the actual id of the input element you will be using.

What's new is that you can pass in any selector that is supported by querySelectorAll (by default, more on this below):

datepickr('#some .complex [selector]');

You can also pass in a node directly:

datepickr(document.getElementById('myId'));

Misc.

If your input has a value attribute on page load, or anytime before the datepickr instance is created, then datepickr will use that date as the default selected one. As long as Date.parse can read the value.

For February, the datepickr code automatically handles checking for a leap year. This may not be ideal for localization so it may change in the future. I will need to investigate this further.

datepickr is minified using the Google Closure Compiler.

Browser Support

The out-of-the-box browser support is every browser except for IE9 and lower.

WHAT! BUT MY CALENDERZ NEED TO WORK ON IE6!

Whoa, whoa, hold on. So, IE6 might be stretching it a bit (maybe, I haven't tested it), but you could get datepickr to work on IE7 and up. How, you ask...? (continued in next section)

Modifying datepickr methods

If you don't care about supporting older browsers you can skip this section.

I've tried to make it as easy as possible to modify some of the base methods to support older browsers, if necessary:

Method	Description	Parameters
hasClass	Whether an element contains a class or not (should return a boolean)	element, className
addClass	Adds a class to an element	element, className
removeClass	Removes a class from an element	element, className
forEach	Iterate over an array	items, callback
querySelectorAll	Should return an array of elements that were matched by the selector	selector
isArray	Is this thing an array?	object
addEventListener	Adds an event listener to an element	element, type, listener, useCapture
removeEventListener	Removes an event listener	element, type, listener, useCapture

To do this you will need to do some JavaScript magic, for example:

<script>
    datepickr.prototype.addClass = function (element, className) { element.className += ' ' + className; };
    datepickr('#yourId');
</script>

That was easy. Of course implementing a proper shim might be better, but the above would work in all browsers.

This can be done for all of the methods listed above.

For example, if you wanted to use jQuery to select the elements for some reason:

<script>
    datepickr.prototype.querySelectorAll = jQuery;
    datepickr('.some #crazy [selector]');
</script>

If you're not sure what's going on above, that's fine, but then I would recommend getting some help with the implementation. It could get quite complex.

Localization

Datepickr supports localizing text in a similar way to modifying the methods (above).

Property	Type	Default	Description
l10n.weekdays.shorthand	array	['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']	The shortened version of each weekday, starting with Sunday
l10n.weekdays.longhand	array	['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']	The long version of each weekday, starting with Sunday
l10n.months.shorthand	array	['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']	Shortened version of each month, starting with January
l10n.months.longhand	array	['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']	Long version of each month, starting with January
l10n.daysInMonth	array	[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]	How many days in each month, starting with January
l10n.firstDayOfWeek	integer	0	Start the calendar on a different weekday (0 = Sunday, 1 = Monday, 2 = Tuesday, etc.)

Weekdays in french:

<script>
    datepickr.prototype.l10n.weekdays.longhand = ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'];
    datepickr('#yourId');
</script>

Start the calendar on Monday instead of Sunday:

<script>
    datepickr.prototype.l10n.firstDayOfWeek = 1;
    datepickr('#yourId');
</script>

Config Options

You can also customize each datepickr instance by passing in some extra config options. The default values that can be overridden are:

Config Option	Type	Default	Description
dateFormat	string	'F j, Y'	A string of characters which are used to define how the date will be displayed in the input box. Very similar to the PHP date function, but with less options. The supported characters are defined below.
altInput	node	null	A reference to another input element. This can be useful if you want to show the user a readable date, but return something totally different to the server.
altFormat	string	null	Exactly the same as date format, but for the altInput field
minDate	integer	null	The minimum date that a user can start picking from, as a JavaScript timestamp. I recommend using getTime
maxDate	integer	null	The maximum date that a user can pick from, as a JavaScript timestamp. I recommend using getTime
shorthandCurrentMonth	boolean	false	Show the month using the shorthand version. I don't know if this is very useful, but maybe?

Change the default date format:

<script>
    datepickr('.someClassName', { dateFormat: 'd-m-Y' });
</script>

Specify a min and max date:

<script>
    datepickr('#minAndMax', {
        // few days ago
        minDate: new Date().getTime() - 2.592e8,
        // few days from now
        maxDate: new Date().getTime() + 2.592e8
    });
</script>

Use an alternate input and format:

<input id="userInput">
<input id="altInput" type="hidden">

<script>
    datepickr('#userInput', {
        dateFormat: 'l, F d, Y', // Wednesday, January 15, 2014
        altInput: document.getElementById('altInput'),
        altFormat: 'm-d-Y' // 01-15-2014
    });
</script>

Date Format

Character	Description	Example
d	Day of the month, 2 digits with leading zeros	01 to 31
D	A textual representation of a day	Mon through Sun
j	Day of the month without leading zeros	1 to 31
l (lowercase 'L')	A full textual representation of the day of the week	Sunday through Saturday
w	Numeric representation of the day of the week	0 (for Sunday) through 6 (for Saturday)
F	A full textual representation of a month	January through December
m	Numeric representation of a month, with leading zero	01 through 12
M	A short textual representation of a month	Jan through Dec
n	Numeric representation of a month, without leading zeros	1 through 12
U	The number of seconds since the Unix Epoch	1413704993
y	A two digit representation of a year	99 or 03
Y	A full numeric representation of a year, 4 digits	1999 or 2003

Note: Suffixes have been removed because JavaScript's Date.parse didn't like them.

Escaping date format characters

To escape a character (if you need to use one of the reserved format characters above) use a double backslash: \\

Example:

dateFormat: '\\Da\\y picke\\d: Y/m/d'

To get something like:

Day picked: 2013/02/12

If you do not escape the characters you would end up with something like this instead:

Tuea13 picke12: 2013/02/12

Which is probably not what you want...

datepickr's Issues

A few changes I made...

Hi,

Thanks for creating and posting this picker. I made a few change for my needs and thought I would post the code.

I made these changes because I need to use a button to show the picker, place the picker over the button, and a callback when the date was selected. Also, allow the picker to be selected twice.

Search for MRD to see the changes/additions.

The full code is below.

Mark
/*
datepickr 3.0 - pick your date not your nose

https://github.com/joshsalverda/datepickr

Copyright © 2014 Josh Salverda <[email protected]>
This work is free. You can redistribute it and/or modify it under the
terms of the Do What The Fuck You Want To Public License, Version 2,
as published by Sam Hocevar. See http://www.wtfpl.net/ for more details.

5/2015 MRD modifications.
*I made these changes because I need to use a button to show the picker, place the picker over the button,
*and a callback when the date was selected. Search for MRD to see the changes.
*1 stop change of self.element.value. I am using buttons with names I do not want to change.
*2 added left and top values for position of picker
*3 so the button can be selected again after a date is selected. Not for text inputs.
*4 added callback when date is selected.
*5 added callback ID so selected picker would be known in callback.
*6 I might have done these changes different, i.e. provide code to ignore each added property, to allow the code to continue
to function as designed but, I just need it for buttons. If the need changes later I will revisit or do a bunch of renaming.

Thanks to Josh for publishing his creation.
*/

var datepickr = function (selector, config, x, y, cb, cbID) { //MRD added x,y,cb,cbID
'use strict';
var elements,
createInstance,
instances = [],
i;

datepickr.prototype = datepickr.init.prototype;

createInstance = function (element) {
    if (element._datepickr) {
        element._datepickr.destroy();
    }
    element._datepickr = new datepickr.init(element, config, x, y, cb, cbID);     //MRD added x,y,cb,cbID
    return element._datepickr;
};

if (selector.nodeName) {
    return createInstance(selector);
}

elements = datepickr.prototype.querySelectorAll(selector);

if (elements.length === 1) {
    return createInstance(elements[0]);
}

for (i = 0; i < elements.length; i++) {
    instances.push(createInstance(elements[i]));
}
return instances;

};

datepickr.init = function (element, instanceConfig, x, y, cb, cbID) { //MRD added x,y,cb,cbID
'use strict';
var self = this,
defaultConfig = {
dateFormat: 'F j, Y',
altFormat: null,
altInput: null,
minDate: null,
maxDate: null,
shorthandCurrentMonth: false
},
calendarContainer = document.createElement('div'),
navigationCurrentMonth = document.createElement('span'),
calendar = document.createElement('table'),
calendarBody = document.createElement('tbody'),
wrapperElement,
currentDate = new Date(),
wrap,
date,
formatDate,
monthToStr,
isSpecificDay,
buildWeekdays,
buildDays,
updateNavigationCurrentMonth,
buildMonthNavigation,
handleYearChange,
documentClick,
calendarClick,
buildCalendar,
getOpenEvent,
bind,
open,
close,
destroy,
init,
//MRD
xPos=x,
yPos=y,
selectionCallback=cb,
selectionCallbackID=cbID;
//MRD

calendarContainer.className = 'datepickr-calendar';
navigationCurrentMonth.className = 'datepickr-current-month';
instanceConfig = instanceConfig || {};

//MRD set the position the picker appears.
calendarContainer.style.position = "fixed";
calendarContainer.style.posLeft = xPos;
calendarContainer.style.posTop = yPos;
//MRD

wrap = function () {
    wrapperElement = document.createElement('div');
    wrapperElement.className = 'datepickr-wrapper';
    self.element.parentNode.insertBefore(wrapperElement, self.element);
    wrapperElement.appendChild(self.element);
};

date = {
    current: {
        year: function () {
            return currentDate.getFullYear();
        },
        month: {
            integer: function () {
                return currentDate.getMonth();
            },
            string: function (shorthand) {
                var month = currentDate.getMonth();
                return monthToStr(month, shorthand);
            }
        },
        day: function () {
            return currentDate.getDate();
        }
    },
    month: {
        string: function () {
            return monthToStr(self.currentMonthView, self.config.shorthandCurrentMonth);
        },
        numDays: function () {
            // checks to see if february is a leap year otherwise return the respective # of days
            return self.currentMonthView === 1 && (((self.currentYearView % 4 === 0) && (self.currentYearView % 100 !== 0)) || (self.currentYearView % 400 === 0)) ? 29 : self.l10n.daysInMonth[self.currentMonthView];
        }
    }
};

formatDate = function (dateFormat, milliseconds) {
    var formattedDate = '',
        dateObj = new Date(milliseconds),
        formats = {
            d: function () {
                var day = formats.j();
                return (day < 10) ? '0' + day : day;
            },
            D: function () {
                return self.l10n.weekdays.shorthand[formats.w()];
            },
            j: function () {
                return dateObj.getDate();
            },
            l: function () {
                return self.l10n.weekdays.longhand[formats.w()];
            },
            w: function () {
                return dateObj.getDay();
            },
            F: function () {
                return monthToStr(formats.n() - 1, false);
            },
            m: function () {
                var month = formats.n();
                return (month < 10) ? '0' + month : month;
            },
            M: function () {
                return monthToStr(formats.n() - 1, true);
            },
            n: function () {
                return dateObj.getMonth() + 1;
            },
            U: function () {
                return dateObj.getTime() / 1000;
            },
            y: function () {
                return String(formats.Y()).substring(2);
            },
            Y: function () {
                return dateObj.getFullYear();
            }
        },
        formatPieces = dateFormat.split('');

    self.forEach(formatPieces, function (formatPiece, index) {
        if (formats[formatPiece] && formatPieces[index - 1] !== '\\') {
            formattedDate += formats[formatPiece]();
        } else {
            if (formatPiece !== '\\') {
                formattedDate += formatPiece;
            }
        }
    });

    return formattedDate;
};

monthToStr = function (date, shorthand) {
    if (shorthand === true) {
        return self.l10n.months.shorthand[date];
    }

    return self.l10n.months.longhand[date];
};

isSpecificDay = function (day, month, year, comparison) {
    return day === comparison && self.currentMonthView === month && self.currentYearView === year;
};

buildWeekdays = function () {
    var weekdayContainer = document.createElement('thead'),
        firstDayOfWeek = self.l10n.firstDayOfWeek,
        weekdays = self.l10n.weekdays.shorthand;

    if (firstDayOfWeek > 0 && firstDayOfWeek < weekdays.length) {
        weekdays = [].concat(weekdays.splice(firstDayOfWeek, weekdays.length), weekdays.splice(0, firstDayOfWeek));
    }

    weekdayContainer.innerHTML = '<tr><th>' + weekdays.join('</th><th>') + '</th></tr>';
    calendar.appendChild(weekdayContainer);
};

buildDays = function () {
    var firstOfMonth = new Date(self.currentYearView, self.currentMonthView, 1).getDay(),
        numDays = date.month.numDays(),
        calendarFragment = document.createDocumentFragment(),
        row = document.createElement('tr'),
        dayCount,
        dayNumber,
        today = '',
        selected = '',
        disabled = '',
        currentTimestamp;

    // Offset the first day by the specified amount
    firstOfMonth -= self.l10n.firstDayOfWeek;
    if (firstOfMonth < 0) {
        firstOfMonth += 7;
    }

    dayCount = firstOfMonth;
    calendarBody.innerHTML = '';

    // Add spacer to line up the first day of the month correctly
    if (firstOfMonth > 0) {
        row.innerHTML += '<td colspan="' + firstOfMonth + '">&nbsp;</td>';
    }

    // Start at 1 since there is no 0th day
    for (dayNumber = 1; dayNumber <= numDays; dayNumber++) {
        // if we have reached the end of a week, wrap to the next line
        if (dayCount === 7) {
            calendarFragment.appendChild(row);
            row = document.createElement('tr');
            dayCount = 0;
        }

        today = isSpecificDay(date.current.day(), date.current.month.integer(), date.current.year(), dayNumber) ? ' today' : '';
        if (self.selectedDate) {
            selected = isSpecificDay(self.selectedDate.day, self.selectedDate.month, self.selectedDate.year, dayNumber) ? ' selected' : '';
        }

        if (self.config.minDate || self.config.maxDate) {
            currentTimestamp = new Date(self.currentYearView, self.currentMonthView, dayNumber).getTime();
            disabled = '';

            if (self.config.minDate && currentTimestamp < self.config.minDate) {
                disabled = ' disabled';
            }

            if (self.config.maxDate && currentTimestamp > self.config.maxDate) {
                disabled = ' disabled';
            }
        }

        row.innerHTML += '<td class="' + today + selected + disabled + '"><span class="datepickr-day">' + dayNumber + '</span></td>';
        dayCount++;
    }

    calendarFragment.appendChild(row);
    calendarBody.appendChild(calendarFragment);
};

updateNavigationCurrentMonth = function () {
    navigationCurrentMonth.innerHTML = date.month.string() + ' ' + self.currentYearView;
};

buildMonthNavigation = function () {
    var months = document.createElement('div'),
        monthNavigation;

    monthNavigation  = '<span class="datepickr-prev-month">&lt;</span>';
    monthNavigation += '<span class="datepickr-next-month">&gt;</span>';

    months.className = 'datepickr-months';
    months.innerHTML = monthNavigation;

    months.appendChild(navigationCurrentMonth);
    updateNavigationCurrentMonth();
    calendarContainer.appendChild(months);
};

handleYearChange = function () {
    if (self.currentMonthView < 0) {
        self.currentYearView--;
        self.currentMonthView = 11;
    }

    if (self.currentMonthView > 11) {
        self.currentYearView++;
        self.currentMonthView = 0;
    }
};

documentClick = function (event) {
    var parent;
    if (event.target !== self.element && event.target !== wrapperElement) {
        parent = event.target.parentNode;
        if (parent !== wrapperElement) {
            while (parent !== wrapperElement) {
                parent = parent.parentNode;
                if (parent === null) {
                    close();
                    break;
                }
            }
        }
    }
};

calendarClick = function (event) {
    var target = event.target,
        targetClass = target.className,
        currentTimestamp;

    if (targetClass) {
        if (targetClass === 'datepickr-prev-month' || targetClass === 'datepickr-next-month') {
            if (targetClass === 'datepickr-prev-month') {
                self.currentMonthView--;
            } else {
                self.currentMonthView++;
            }

            handleYearChange();
            updateNavigationCurrentMonth();
            buildDays();
        } else if (targetClass === 'datepickr-day' && !self.hasClass(target.parentNode, 'disabled')) {
            self.selectedDate = {
                day: parseInt(target.innerHTML, 10),
                month: self.currentMonthView,
                year: self.currentYearView
            };

            currentTimestamp = new Date(self.currentYearView, self.currentMonthView, self.selectedDate.day).getTime();

            if (self.config.altInput) {
                if (self.config.altFormat) {
                    self.config.altInput.value = formatDate(self.config.altFormat, currentTimestamp);
                } else {
                    // I don't know why someone would want to do this... but just in case?
                    self.config.altInput.value = formatDate(self.config.dateFormat, currentTimestamp);
                }
            }

//MRD
if (selectionCallback)
selectionCallback(selectionCallbackID, self.currentYearView, self.currentMonthView, self.selectedDate.day);

      // self.element.value = formatDate(self.config.dateFormat, currentTimestamp); do not change value of button

//MRD

            close();
            buildDays();
        }
    }
};

buildCalendar = function () {
    buildMonthNavigation();
    buildWeekdays();
    buildDays();

    calendar.appendChild(calendarBody);
    calendarContainer.appendChild(calendar);

    wrapperElement.appendChild(calendarContainer);
};

getOpenEvent = function () {
    if (self.element.nodeName === 'INPUT') {
        return 'focus';
    }
    return 'click';
};

bind = function () {
    self.addEventListener(self.element, getOpenEvent(), open);
    self.addEventListener(calendarContainer, 'click', calendarClick);
};

open = function () {
    self.addEventListener(document, 'click', documentClick);
    self.addClass(wrapperElement, 'open');
};

close = function () {
    self.removeEventListener(document, 'click', documentClick);
    self.removeClass(wrapperElement, 'open');

//MRD
//so can click button again after selection, not for text inputs.
// document.getElementById(self.element.id).blur();
//MRD
};

destroy = function () {
    var parent,
        element;

    self.removeEventListener(document, 'click', documentClick);
    self.removeEventListener(self.element, getOpenEvent(), open);

    parent = self.element.parentNode;
    parent.removeChild(calendarContainer);
    element = parent.removeChild(self.element);
    parent.parentNode.replaceChild(element, parent);
};

init = function () {
    var config,
        parsedDate;

    self.config = {};
    self.destroy = destroy;

    for (config in defaultConfig) {
        self.config[config] = instanceConfig[config] || defaultConfig[config];
    }

    self.element = element;

    if (self.element.value) {
        parsedDate = Date.parse(self.element.value);
    }

    if (parsedDate && !isNaN(parsedDate)) {
        parsedDate = new Date(parsedDate);
        self.selectedDate = {
            day: parsedDate.getDate(),
            month: parsedDate.getMonth(),
            year: parsedDate.getFullYear()
        };
        self.currentYearView = self.selectedDate.year;
        self.currentMonthView = self.selectedDate.month;
        self.currentDayView = self.selectedDate.day;
    } else {
        self.selectedDate = null;
        self.currentYearView = date.current.year();
        self.currentMonthView = date.current.month.integer();
        self.currentDayView = date.current.day();
    }

    wrap();
    buildCalendar();
    bind();
};

init();

return self;

};

datepickr.init.prototype = {
hasClass: function (element, className) { return element.classList.contains(className); },
addClass: function (element, className) { element.classList.add(className); },
removeClass: function (element, className) { element.classList.remove(className); },
forEach: function (items, callback) { [].forEach.call(items, callback); },
querySelectorAll: document.querySelectorAll.bind(document),
isArray: Array.isArray,
addEventListener: function (element, type, listener, useCapture) {
element.addEventListener(type, listener, useCapture);
},
removeEventListener: function (element, type, listener, useCapture) {
element.removeEventListener(type, listener, useCapture);
},
l10n: {
weekdays: {
shorthand: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
longhand: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
},
months: {
shorthand: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
longhand: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
},
daysInMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
firstDayOfWeek: 0
}
};

Add events to actions

Events could be fired when a date is picked, or when the calendar is opened, or anywhere else where it might be useful.

This would be helpful when implementing any custom functionality that isn't already standard in the base code.

add last days of previous month and first days of next month

maybe put it optional ( on/off )

Support for tab key

When the input is currently focused and the datepickr calendar is visible, and you press tab, the datepickr calendar stays open and another one opens showing 2 on the page.

Screenshot:

EndDate = BeginDate + 1 year

I'm using the datepickr on two fields in a form : BeginDate and EndDate

When the user selects a BeginDate, I would like the EndDate to be automatically set to one year after the BeginDate. The user can override the default by clicking on the EndDate field, but generally one year is fine.

I saw in the doc that we can add an eventListener, but no example on how to do it.

I have tried to put an onChange on the input field, but it doesn't work...

MinDate does not change default calendar date

This is a great script, but has one small flaw!

When setting a mindate that is beyond the scope of the current month, the calendar still shows the current month as the start point. EG: If I set minDate to January 4th, 2020, the calendar will still show the present month in the present year by default. A user would then have to click forward (12 months X 5 years = ) 60 times to get to the first available month.

To fix this, I changed the following lines in the script:

Line 66:
currentDate = new Date(),

Updated:
currentDate = minDate,

As a note, if the minDate is the 1st, this still sets current date to the previous month.

Some Browsers not using Max date

I have seeing some user on Chrome, Edge where the max date is not working. Min date seems to be fine, but for some reason Maxdate is not working. it will for some users not others.

Altinput isn't read when opening calendar

One of the examples shows an icon. parameter 1 points to a css class and parameter 2 has an altInput value.
The calendar doesn't read the content of the altInput on open, so the date is always initially the current date

Allow the calendar to be open at all times

If it's always going to be open, the calendar would need to take up space in the dom so that it doesn't cover anything.

Browserify & NPM Support

Hi Josh,

I'm perfectly willing to put together a PR for you, but I'd rather have a discussion first.

Your library is very useful. However:

1. it cannot be leveraged by browserify users (and cjs friends)
2. it's not on NPM

To solve the first issue, I can simply wrap your code using the following pattern: http://www.matteoagosti.com/blog/2013/02/24/writing-javascript-modules-for-both-browser-and-node/

To solve the second issue, we'll just need to add the project to NPM and have a simple package.json file.

...with this, users will be able to:

$ npm install --save datepickr
$ vim ViewModelThatNeedsADatePicker.js
var datepickr = require('datepickr');

module.exports = function() {
  ///code here

  this.registerFormDatePicker = function() {
    datepickr('#mydatepickerid');
  };

  ///code here
};

Thoughts?

Parsed date is incorrect if date format is different from default 'F j, Y'

Hi,
I've tried doing two different tests after changing the input control value property to "28/02/2015"(value="28/02/2015").
-I changed the dateformat in js to'd/m/Y '
-I explicitly call the dateformat ' {dateFormat: 'd/m/Y '} ' as an option in html

The control returns the date 02/04/2017.

I'm trying to figure out what doesn't work.

change Years

it is possible to change years? it is important for birthday etc.

Add a way to select years and months quickly

Some sort of dropdown or maybe something even better...?

Calendar not working with Google translate

I am having an issue where the calendar works perfect in English, but the site has the Google translate option and when Spanish is selected, the calendar will open, but when you select a date, it just freezes and the calendar stay open but you cannot select the date.
Any ideas?
Jeff

month previous / next buttons don't work

All the buttons do is hide the calendar instead of changing month, must been broken in some recent release.

picker position...

Hello,

I am fairly new to Javascript/CSS/HTML. I have been a programmer for decades. The position of the picker is the question. I found, in the CSS, where the position is defined and I can change it.

The issue is I want the picker to appear next to the input field; there are several date input fields on the page. The CSS is global and I have not discovered how to position the picker based on the input element position.

The ID of the picker is what is vexing me. I assume if I had the picker ID, I could add code to position the picker.

Ideas?

Thanks,

Mark
P.S. Thank you for publishing this date picker.

Date picker hides when navigating months

Date picker wont stay opened while navigating months.

license?

Is it MIT, ISC, GPL, etc?

Allow ESC to close calendar

It may be difficult, but it would be nice if the ESC key could close the calendar.

Great job on this lightweight script, and even more kudos for not requiring jquery!

Use browser Internationalization API

The Internationalization API is supported in all important browsers now.
This can be used for translating/localizing day/week/month names and abbreviations,
making the currently used locale data obsolete and add support for more locales.

multiple calendar with icon set only single instance

Leap year

Does datepikr support leap years (ie. February has 28-29 days in the month)?