Developer-Friendly Date Picker Plugin In Pure Vanilla JavaScript

How to make use of it:

Insert the Stylesheet the-datepicker.css and JavaScript the-datepicker.js into the HTML file.

<link href="dist/the-datepicker.css" rel="stylesheet" />
<script src="dist/the-datepicker.js"></script>

Create a standard textual content subject to simply accept the date value.

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

Attach the date picker to the textual content field.

const input = document.getElementById('example');
const datepicker = new TheDatepicker.Datepicker(input);
datepicker.render();

Possible choices, features, and API strategies.

// set initial date
datepicker.options.setInitialDate();

// set initial month
datepicker.options.setInitialMonth();

// hide on blur
datepicker.options.setHideOnBlur();

// hide on select
datepicker.options.setHideOnSelect();

// set date format, e.g. j. n. Y
datepicker.options.setInputFormat();

// set the first day of week
datepicker.options.setFirstDayOfWeek();

// set min/max dates
datepicker.options.setMinDate();
datepicker.options.setMaxDate();

// limits the year selection
datepicker.options.setDropdownItemsLimit(1900, 2100);

// show/hide days when out of month
datepicker.options.setDaysOutOfMonthVisible();

// fixed rows count
datepicker.options.setFixedRowsCount();

// toggle selection
datepicker.options.setToggleSelection();

// show Deselect button
datepicker.options.setShowDeselectButton();

// show Close button
datepicker.options.setShowCloseButton();

// show Reset button
datepicker.options.setShowResetButton();

// allow empty
datepicker.options.setAllowEmpty();

// set title
datepicker.options.setTitle();

// show month picker as a dropdown
datepicker.options.setMonthAsDropdown();

// show year picker as a dropdown
datepicker.options.setYearAsDropdown();

datepicker.options.setMonthAndYearSeparated();
datepicker.options.setPositionFixing();

datepicker.options.setDateAvailabilityResolver((date) => {
  // return true;
});

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.setCellClassesResolver((day) => {
  // return [];
});

datepicker.options.onBeforeSelect((event, day, previousDay) => {
  // callback
});

datepicker.options.onSelect((event, day, previousDay) => {
  // callback
});

datepicker.options.onBeforeSwitch((event, isOpening) => {
  // callback
});

datepicker.options.onSwitch((event, isOpening) => {
 // callback
});

datepicker.options.onBeforeGo((event, month, previousMonth) => {
  // callback
});

datepicker.options.onGo((event, month, previousMonth) => {
  // callback
});

// set prefix
datepicker.options.setClassesPrefix();

// set go back HTML
datepicker.options.setGoBackHtml();

// set go forward HTML
datepicker.options.setGoForwardHtml();

// set close HTML
datepicker.options.setCloseHtml();

// set reset HTML
datepicker.options.setResetHtml();

// set deselect HTML
datepicker.options.setDeselectHtml();

// localize the date picker
datepicker.options.translator.setDayOfWeekTranslation(TheDatepicker.DayOfWeek.Monday, 'Mo');
datepicker.options.translator.setDayOfWeekTranslation(TheDatepicker.DayOfWeek.Tuesday, 'Tu');
datepicker.options.translator.setDayOfWeekTranslation(TheDatepicker.DayOfWeek.Wednesday, 'We');
datepicker.options.translator.setDayOfWeekTranslation(TheDatepicker.DayOfWeek.Thursday, 'Th');
datepicker.options.translator.setDayOfWeekTranslation(TheDatepicker.DayOfWeek.Friday, 'Fr');
datepicker.options.translator.setDayOfWeekTranslation(TheDatepicker.DayOfWeek.Saturday, 'Sa');
datepicker.options.translator.setDayOfWeekTranslation(TheDatepicker.DayOfWeek.Sunday, 'Su');
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.January, 'January');
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.February, 'February');
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.March, 'March');
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.April, 'April');
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.May, 'May');
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.June, 'June');
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.July, 'July');
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.August, 'August');
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.September, 'September');
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.October, 'October');
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.November, 'November');
datepicker.options.translator.setMonthTranslation(TheDatepicker.Month.December, 'December');

// open the date picker
datepicker.open();

// close the date picker
datepicker.close();

// destroy the date picker
datepicker.destroy();

Developer-friendly Date Picker, The Datepicker Plugin/Github

See Demo And Download