一、介绍
datepicker控件是jQuery UI的一部分，在Web应用程序中可以方便地选择日期。它通常用于搜索、预约、预定等场景。datepicker控件具有许多不同配置选项，可以使其适应不同的业务需求。
二、基础用法
使用datepicker控件非常简单。只需像下面的代码一样导入jQuery和jQuery UI库，并将input元素设置为datepicker控件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础datepicker控件</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css">
</head>
<body>
<input type="text" id="datepicker">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</body>
</html>
三、常用选项
datepicker控件有许多可自定义的选项，具有不同的功能，根据特定的业务需求，调整选项可以改变datepicker的行为和外观。下面列举了一些最常用的选项。
1. dateFormat
dateFormat选项允许您指定日期的格式。默认情况下，日期显示为单位的月、日和年份（MM/DD/YYYY）。您可以指定不同的格式，例如：年月日（YYYY-MM-DD）。
$( function() {
$( "#datepicker" ).datepicker({
dateFormat: "yy-mm-dd"
});
});
2. minDate 和 maxDate
使用minDate和maxDate选项，可以限制用户选择的日期范围。例如，可以禁用以前的日期和未来的日期以确保日期选择在指定时间段内。
$( function() {
$( "#datepicker" ).datepicker({
minDate: new Date(2019, 0, 1),
maxDate: new Date(2020, 0, 1)
});
});
3. changeMonth 和 changeYear
changeMonth和changeYear选项允许您在datepicker控件中添加下拉列表。用户可以使用下拉菜单选择月份和年份。
$( function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
});
});
4. showOn
showOn选项定义了datepicker如何触发。这个选项可以设置为button、both和focus。默认情况下，datepicker将在输入框获得焦点时显示。
$( function() {
$( "#datepicker" ).datepicker({
showOn: "both"
});
});
5. numberOfMonths
numberOfMonths选项定义在每个页面上显示的月份数。默认情况下，单个月份显示。
$( function() {
$( "#datepicker" ).datepicker({
numberOfMonths: 2
});
});
四、事件处理
datepicker控件允许您监听许多事件。这些事件可以用于调整datepicker的行为或与其他元素进行交互。下面列出的是一些可以用于datepicker控件的常用事件。
1. onSelect
当用户选择日期时触发onSelect事件。
$( function() {
$( "#datepicker" ).datepicker({
onSelect: function(dateText) {
console.log("Selected date: " + dateText);
}
});
});
2. onClose
当用户关闭datepicker时触发onClose事件。
$( function() {
$( "#datepicker" ).datepicker({
onClose: function(dateText) {
console.log("Selected date: " + dateText);
}
});
});
3. beforeShow
beforeShow事件允许您在datepicker控件显示之前修改选项或执行其他任务。例如，您可以使用这个事件禁用特定日期。
$( function() {
$( "#datepicker" ).datepicker({
beforeShow: function(dateText) {
if (dateText === "06/01/2020") {
return false;
}
}
});
});
五、总结
datepicker控件是jQuery UI库中的一部分，用于在Web应用程序中选择用户输入的日期。它有许多自定义选项，可以根据应用程序的需求调整其行为和外观。要使用datepicker，只需要将它附加到一个输入字段上即可。您可以使用各种事件监听器来调整datepicker的行为，例如，在选择日期时触发的事件，或在关闭datepicker时触发的事件。无论您需要什么类型的日期选择器，datepicker都可以根据您的需求进行自定义。
