介绍
datepick 是一个基于 jQuery 的日期选择器插件，可以让用户方便地选择日期。它支持多种格式的日期显示和本地化，可以自定义样式和事件处理程序，并且易于使用和集成到现有项目中。
安装和使用
要使用 datepick，首先需要在你的项目中安装它。你可以使用 npm 来安装：
npm install datepick
然后，在你的 HTML 页面中引入 jQuery 和 datepick 插件：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <link rel="stylesheet" href="node_modules/datepick/jquery.datepick.css"> <script src="node_modules/datepick/jquery.datepick.js"></script>
接下来，在你的 JavaScript 代码中，你可以创建一个 datepick 实例并将其附加到一个 HTML 元素上：
$('#datepicker').datepick();这将在 #datepicker 元素上显示一个日期选择器。你可以通过指定选项来自定义日期选择器的行为和外观。例如，要在日期选择器中显示今天的日期，可以使用以下代码：
$('#datepicker').datepick({defaultDate: new Date()});选项
datepick 支持多个选项，可用于自定义其行为和外观。以下是一些常用选项：
- dateFormat：日期格式，例如
'yyyy-mm-dd'。 - defaultDate：默认日期，可以是字符串、日期对象或一个返回日期对象的函数。
- minDate 和 maxDate：可选的最小和最大日期，可以是字符串、日期对象或一个返回日期对象的函数。
- showTrigger：显示日期选择器的触发器，默认为点击输入框。可以设置为
'focus'使得在输入框获得焦点时会自动弹出日期选择器。
更多选项请参考 datepick 官方文档。
自定义样式
要自定义日期选择器的样式，你可以使用 CSS。datepick 提供了多个 CSS 类，你可以为它们指定样式。以下是一些常用类：
- .datepick：日期选择器的主体。
- .datepick-month 和 .datepick-year：月份和年份选择器区域。
- .datepick-month-prev 和 .datepick-year-prev：上一个月份和年份按钮。
- .datepick-month-next 和 .datepick-year-next：下一个月份和年份按钮。
- .datepick-days：星期几和日期列表。
- .datepick-day：日期单元格。
例如，以下 CSS 样式将调整日期选择器的大小并更改日期单元格的颜色：
.datepick {
width: 300px;
}
.datepick-day {
background-color: #eee;
}本地化
datepick 支持多种语言和日期格式，你可以根据需要进行配置。要配置本地化，请使用 $.datepick.setDefaults() 方法，并指定适当的选项。例如，以下代码将设置日期格式为 'd M yyyy' 并将语言设置为法语：
$.datepick.setDefaults({
dateFormat: 'd M yyyy',
monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa']
});事件处理程序
datepick 提供了多个事件处理程序，可用于在特定事件发生时执行自定义操作。以下是一些常用事件：
- onSelect：当用户选择日期时触发。可以获取所选日期作为参数。
- onChangeMonthYear：当用户更改月份或年份时触发。可以获取新的月
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/38663