采用jqueryUI创建日期选择器

时间:2023-03-09 14:58:52
采用jqueryUI创建日期选择器

该公司的项目使用的插件时间选择,百度很长一段时间。没有找到合适的,而且,他们在看了jqueryUI。自己变成一个更好的集成日期选择器。为了以后遇到相同的问题是可以解决。

以下就贴出部分使用的代码,比較简单,可是非常有用!!!

<!doctype html>
<html lang="en"> <head>
<meta charset="utf-8">
<title>jQuery UI 日期选择器(Datepicker) - 默认功能</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<!-引入jqueryUI的相关文件-->
<style>
#draggable {
width: 150px;
height: 150px;
padding: 0.5px;
border: 1px solid #F00
}
</style>
<script>
$(function() {
$("#datepicker").datepicker({
showOtherMonths: true,
selectOtherMonths: true,
showButtonPanel: true,
/*显示今天的日期的显示。以及关闭时间选择器*/
changeMonth: true,
/*显示选择其它月份*/
changeYear: true,
/*显示选择其它年份*/
dateFormat: "yy - mm - dd" /*设置日期的显示格式*/ ,
showWeek: true,/*显示一年中的第几周*/
firstDay: 1
})
});
</script>
</head>
<body>
<p>日期:
<input type="text" id="datepicker">
</p>
</body> </html>

关于JqueryUI的datepicker选择器的其它部分属性能够通过以下的链接查看:

jQuery UI API - 日期选择器部件


版权声明:本文博主原创文章,博客,未经同意不得转载。