用jQuery UI Datepicker写一个html的年、年月、年季案例
时间: 2024-01-25 10:02:16 浏览: 129
jquery datepicker 小例子
3星 · 编辑精心推荐
好的,以下是一个使用jQuery UI Datepicker创建年、年月、年季选择器的HTML示例:
```
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Datepicker Example</title>
<!-- 引入jQuery和jQuery UI的CSS文件 -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- 引入jQuery文件 -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<!-- 引入jQuery UI的JavaScript文件 -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
// 年份选择器
$("#yearpicker").datepicker({
changeYear: true,
showButtonPanel: true,
dateFormat: "yy",
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, 0, 1));
}
});
// 年月选择器
$("#monthpicker").datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: "yy-mm",
onClose: function(dateText, inst) {
var year = inst.selectedYear;
var month = ("0" + (inst.selectedMonth + 1)).slice(-2);
$(this).datepicker('setDate', new Date(year, inst.selectedMonth, 1));
}
});
// 年季选择器
$("#quarterpicker").datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: "yy-Q",
onClose: function(dateText, inst) {
var year = inst.selectedYear;
var quarter = Math.floor((inst.selectedMonth) / 3) + 1;
var month = (quarter - 1) * 3;
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
</script>
</head>
<body>
<!-- 创建一个输入框,用于选择年份 -->
<label for="yearpicker">选择年份:</label>
<input type="text" id="yearpicker">
<!-- 创建一个输入框,用于选择年月 -->
<label for="monthpicker">选择年月:</label>
<input type="text" id="monthpicker">
<!-- 创建一个输入框,用于选择年季 -->
<label for="quarterpicker">选择年季:</label>
<input type="text" id="quarterpicker">
</body>
</html>
```
在这个示例中,我们创建了三个输入框,分别用于选择年、年月和年季。我们使用了jQuery和jQuery UI的CSS和JavaScript文件,并调用了datepicker()函数来初始化每个日期选择器。我们定制了每个日期选择器的行为,例如允许选择年份、月份和季度、显示按钮面板和设置日期格式。在每个日期选择器的onClose回调函数中,我们将选择的日期设置为每个日期选择器的开始日期(例如,对于年份选择器,我们将选择的日期设置为所选年份的第一天)。
阅读全文