一款开发人员友好的js简单日期选择插件,可以自定义很容易二次开发。JavaScript原生代码开发的日期选择插件。
const input = document.getElementById('example');
const datepicker = new TheDatepicker.Datepicker(input);
datepicker.render();
// 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();