jQuery UI 实例 - 日期选择器(Datepicker)
jQuery UI 实例 - 日期选择器(Datepicker)
介绍
Datepicker 是 jQuery UI 中用来选择日期的组件。它允许用户选择日期,支持各种语言和日期格式。
使用方法
Datepicker 插件需要同时引入 jQuery 和 jQuery UI,可以从官网下载最新版的 jQuery UI,也可以在网上搜索其他的下载地址。在 HTML 中引入以下代码:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
在上面的代码中,我们使用了 jQuery 的 ready 方法和 Datepicker 插件的初始化方法。当文档加载完成时,Datepicker 会自动初始化。在 HTML 中创建一个输入框,并设置其 id 为 datepicker,就可以在网页上看到日期选择器了。
选项设置
Datepicker 提供许多选项,可以自定义日期选择器的外观和行为。以下是一些常用的选项:
- dateFormat:指定日期的格式。默认值是 mm/dd/yy。其他常用格式有 yy-mm-dd 和 d M, yy。
- altField:指定一个隐藏的输入框,用来保存日期的值。
- altFormat:指定隐藏输入框的日期格式。
- changeMonth:允许用户选择月份。
- changeYear:允许用户选择年份。
- minDate:指定可以选择的最小日期。
- maxDate:指定可以选择的最大日期。
在初始化代码中使用选项设置的方法如下:
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: 'yy-mm-dd',
altField: "#alt-date",
altFormat: 'yy, MM d',
changeMonth: true,
changeYear: true,
minDate: new Date(2021, 0, 1),
maxDate: new Date(2022, 11, 31)
});
});
事件监听
Datepicker 提供了多个事件可以监听,以便根据用户行为进行相应的处理。以下是一些常用的事件:
- onSelect:当用户选择日期时触发此事件。
- onClose:当日期选择器关闭时触发此事件。
- beforeShowDay:可以在日期选择器上设置自定义日期的样式或禁用某些日期。
监听事件的方法如下:
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(date) {
console.log("用户选择了日期:" + date);
},
beforeShowDay: function(date) {
// 如果日期是周末,就禁用
if (date.getDay() === 0 || date.getDay() === 6) {
return [false];
} else {
return [true];
}
}
});
});
总结
Datepicker 是一个非常方便的日期选择器插件,可以帮助用户快速选择日期。我们可以使用其各种选项和事件来进行自定义设置,满足各种需求。