用jQuery UI Datepicker写一个html的案例
时间: 2024-02-23 12:00:07 浏览: 183
jquery UI Datepicker时间控件冲突问题解决
好的,以下是一个使用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() {
// 初始化日期选择器
$("#datepicker").datepicker({
changeMonth: true, // 允许选择月份
changeYear: true, // 允许选择年份
showButtonPanel: true, // 显示按钮面板
dateFormat: "yy-mm-dd" // 设置日期格式
});
});
</script>
</head>
<body>
<!-- 创建一个输入框,用于选择日期 -->
<label for="datepicker">选择日期:</label>
<input type="text" id="datepicker">
</body>
</html>
```
在这个示例中,我们使用了jQuery和jQuery UI的CSS和JavaScript文件,并创建了一个输入框,用于选择日期。我们通过调用datepicker()函数来初始化日期选择器,并传递一些选项来定制它的行为,例如允许选择年份和月份、显示按钮面板和设置日期格式。最后,我们将datepicker()函数应用于输入框,这将在输入框中创建一个日期选择器。
阅读全文