The Datepicker

Date:

×

Some options take effect only if changed before first datepicker open.

var input = document.getElementById('my-input');
var datepicker = new TheDatepicker.Datepicker(input);
// var container = document.getElementById('my-container');
// var datepicker = new TheDatepicker.Datepicker(input, container);
// var datepicker = new TheDatepicker.Datepicker(null, container);
// var datepicker = new TheDatepicker.Datepicker(input, null, new TheDatepicker.Options());
datepicker.options.setInitialDate(""); // direct html input value has priority over this option
datepicker.options.setInitialMonth("");
datepicker.options.setInitialDatePriority();
datepicker.;
datepicker.;
datepicker.;
datepicker.;
datepicker.selectDate("", /* doUpdateMonth: */ );
datepicker.goToMonth("");
datepicker.getSelectedDate() === null;
datepicker.getSelectedDateFormatted() === null;
datepicker.getCurrentMonth().toString() === "Sat Mar 01 2025 00:00:00 GMT+0000 (Coordinated Universal Time)";
datepicker.options.setHideOnBlur();
datepicker.options.setHideOnSelect();
datepicker.options.setInputFormat("");
datepicker.options.setFirstDayOfWeek();
datepicker.options.setMinDate("");
datepicker.options.setMaxDate("");
datepicker.options.setDropdownItemsLimit();
datepicker.options.setHideDropdownWithOneItem();
datepicker.options.setDaysOutOfMonthVisible();
datepicker.options.setFixedRowsCount();
datepicker.options.setToggleSelection();
datepicker.options.setShowDeselectButton();
datepicker.options.setAllowEmpty();
datepicker.options.setShowCloseButton();
datepicker.options.setTitle("");
datepicker.options.setShowResetButton();
datepicker.options.setMonthAsDropdown();
datepicker.options.setYearAsDropdown();
datepicker.options.setMonthAndYearSeparated();
datepicker.options.setChangeMonthOnSwipe();
datepicker.options.setAnimateMonthChange();
datepicker.options.setPositionFixing();
datepicker.options.setDateAvailabilityResolver((date) => {
// if (date.getDate() === 5) return false; return true;
});
datepicker.options.setCellContentStructureResolver(() => {
return document.createElement('span');
}, (element, day) => {
element.innerText = day.dayNumber;
});
datepicker.options.setCellContentResolver((day) => {
return day.dayNumber;
});
datepicker.options.addCellClassesResolver((day) => {
// if (day.dayNumber === 20) return ['red']; // if (day.dayNumber === 10) return ['green']; return [];
});
datepicker.options.addDayModifier((day) => {
// day.isSunday = day.dayOfWeek === TheDatepicker.DayOfWeek.Sunday;
});
datepicker.options.setHeaderStructureResolver(() => {
/* var header = document.createElement('div'); header.innerText = 'Hello world'; return header; */
});
datepicker.options.setFooterStructureResolver(() => {

});
datepicker.options.onBeforeSelect((event, day, previousDay) => {
// this instanceof TheDatepicker.Datepicker // applies to all on*
});
datepicker.options.onSelect((event, day, previousDay) => {

});
datepicker.options.onBeforeOpenAndClose((event, isOpening) => {

});
datepicker.options.onOpenAndClose((event, isOpening) => {

});
datepicker.options.onBeforeMonthChange((event, month, previousMonth) => {

});
datepicker.options.onMonthChange((event, month, previousMonth) => {

});
datepicker.options.onBeforeFocus((event, day, previousDay) => {

});
datepicker.options.onFocus((event, day, previousDay) => {

});
datepicker.options.; // optional argument: resolver
datepicker.options.; // optional argument: modifier
datepicker.options.; // optional argument: listener (applies to all off*)
datepicker.options.;
datepicker.options.;
datepicker.options.;
datepicker.options.;
datepicker.options.;
datepicker.options.;
datepicker.options.;
datepicker.options.setClassesPrefix("");
datepicker.options.setToday("");
datepicker.options.setGoBackHtml("");
datepicker.options.setGoForwardHtml("");
datepicker.options.setCloseHtml("");
datepicker.options.setResetHtml("");
datepicker.options.setDeselectHtml("");
datepicker.options.translator.setDayOfWeekTranslation(TheDatepicker.DayOfWeek.Monday, "");
datepicker.options.translator.setDayOfWeekTranslation(TheDatepicker.DayOfWeek.Tuesday, "");
datepicker.options.translator.setDayOfWeekTranslation(TheDatepicker.DayOfWeek.Wednesday, "");
datepicker.options.translator.setDayOfWeekTranslation(TheDatepicker.DayOfWeek.Thursday, "");
datepicker.options.translator.setDayOfWeekTranslation(TheDatepicker.DayOfWeek.Friday, "");
datepicker.options.translator.setDayOfWeekTranslation(TheDatepicker.DayOfWeek.Saturday, "");
datepicker.options.translator.setDayOfWeekTranslation(TheDatepicker.DayOfWeek.Sunday, "");
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.January, "");
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.February, "");
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.March, "");
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.April, "");
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.May, "");
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.June, "");
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.July, "");
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.August, "");
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.September, "");
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.October, "");
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.November, "");
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.December, "");
datepicker.options.translator.setTitleTranslation(TheDatepicker.TitleName.GoBack, "");
datepicker.options.translator.setTitleTranslation(TheDatepicker.TitleName.GoForward, "");
datepicker.options.translator.setTitleTranslation(TheDatepicker.TitleName.Close, "");
datepicker.options.translator.setTitleTranslation(TheDatepicker.TitleName.Reset, "");
var datepickerPromise = TheDatepicker.onDatepickerReady(input), (datepicker) => {
// this instanceof HTMLElement
});
(async () => {
var datepicker = await datepickerPromise;
})();
datepicker.render();

Learn more about options in source code (setters are commented).
Changing options after render takes effect immediately only if you call datepicker.render() again.

Pure JavaScript Datepicker by Slevomat.cz.
Github