js简单日期选择插件

60 阅读 0 评论 40 点赞

我是靠谱客的博主瘦瘦钥匙，最近开发中收集的这篇文章主要介绍js简单日期选择插件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

下载地址

一款开发人员友好的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();