使用jqueryUI來制作一個日期選擇器
來源：程序員人生 發布時間：2014-09-15 00:03:56 閱讀次數：2726次
公司的項目要用到時間選擇器的一個插件，百度了很久，沒有找到合適的，自己就看了下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 - 日期選擇器部件
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
