jQuery日歷
基本的使用方法，參考官方網站：http://jqueryui.com/datepicker/
典型樣例如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" >
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() { $( "#datepicker" ).datepicker(); });
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>對于在中文的呈現，還需要額外的一個腳本：https://github.com/jquery/jquery-ui/blob/master/ui/i18n/jquery.ui.datepicker-zh-CN.js
選擇日期
使文本框只讀
這里需要注意，如果文本框不允許輸入的話，需要設置readonly屬性：
$("#datepicker").prop("readOnly", true).datepicker();另外還需要注意，如非必要，不要直接在文本框的html屬性上設置readonly(特別是asp.net TextBox)，否則后臺可能不能正常獲取。
控制輸入的字符
開啟constrainInput屬性，就可以控制文本框的輸入只能為dateFormat屬性中規定的(沒啟用readonly情況下)：
$("#datepicker").datepicker({ constrainInput: true });
顯示年、月選擇框
默認情況下選擇年、月比較麻煩，這里可以開啟兩個屬性是年、月變為下拉框選擇：
$(".dp").datepicker({ changeMonth: true, changeYear: true });另外還可以把年下拉框顯示在月下拉框之前：
$(".dp").datepicker({ changeMonth: true, changeYear: true, showMonthAfterYear: true });設置選擇的年的范圍，可以是具體的年份或者是特定的格式：
-
"-nn:+nn"相對于當前年份，當前2012年，如"-5:+5"就是從2007-2017范圍
-
"c-nn:c+nn"相對于選中的年份，如選中2013，"c-5:c+5"就是從2008-2018范圍
-
"nnnn:nnnn"直接指定年份，如"2010-2013"
$(".dp").datepicker({ changeMonth: true, changeYear: true, showMonthAfterYear: true, yearRange: "-5:+5" });
$(".dp").datepicker({ changeMonth: true, changeYear: true, showMonthAfterYear: true, yearRange: "c-5:c+5" });
$(".dp").datepicker({ changeMonth: true, changeYear: true, showMonthAfterYear: true, yearRange: "2010:2013" });
顯示日期的格式
通過設置dateFormat屬性來實現，分別用yy、mm、dd來表示年、月、日；默認值為mm/dd/yy，中文環境下一般設置為：
$(".dp").datepicker({ dateFormat: "yy-mm-dd" });控制日期范圍
通過minDate/maxDate來設置可以選擇的日期范圍，可以是日期類型； 或者是特定的格式，使用三個字符來表示：
1.第一個字符為+或-
2.第二個字符為數字
3.第三個字符表示單位如y,m,w,d表示年、月、周、天，可以拼出N中結果如："+1y" "-1m"
4.而且可以疊加，只要中間空格隔開即可如："+1m +1w +2d"表示一個月+一周+兩天
$(".dp").datepicker({ maxDate: "+1m +1w +1d", minDate: "-1d" });
$(".dp").datepicker({ maxDate: new Date(2012,12,21), minDate: new Date(2012,12,08) }); 顯示今天及確定按鈕
$(".dp").datepicker({ showButtonPanel: true }); 還可以設置點擊今天調到當前月份的日歷視圖：
$(".dp").datepicker({ showButtonPanel: true, gotoCurrent: true });選擇時間
jQuery UI Datepicker沒有提供選擇時間功能，不過有人基于jQuery UI Datepicker創造了timepicker：
http://trentrichardson.com/examples/timepicker/
可以從https://github.com/trentrichardson/jQuery-Timepicker-Addon獲取它的最新版本
資源引入
除了需要引入上面jQuery UI Datepicker使用的資源以外，還需要一下資源：
<link href="js/timepicker-addon/jquery-ui-timepicker-addon.css" rel="stylesheet" />
<script src="js/timepicker-addon/jquery-ui-timepicker-addon.min.js"></script>
<script src="js/timepicker-addon/jquery-ui-timepicker-zh-CN.min.js"></script>使用方法
它的功能分為兩部分：
-
一種是可以同時選擇日期和時間的datetimepicker，
-
另一種是只能選時間的timepicker
$(".dp").datetimepicker();
$(".dp").timepicker();
參數設置
它也有自己的一些參數可以設置，這里僅列出重要的：
timeFormat 設置時間格式，其中兩個相同字母的表示不足兩位補0
H/HH：24小時
h/hh：12小時
m/mm：分鐘
s/ss：秒鐘
l：毫秒
t/tt,T/TT：設置AM/PM即上午/下午
z：失去
defaultTimezone：默認時區"+0000"
showHour/showMinute/showSecond/…showTimezone/showTime分別設置是否顯示相應選擇
stepHour/stepMinute/StepSecond…分別設置拖動滑塊時增減的數值
maxDateTime/minDateTime：控制時間范圍
controlType：控件類型："select"(下拉選擇)、"slide"(拖動滑塊，默認) 格式化輸入
有時候可能會需要可以選擇也可以輸入，這時候可以額外附加腳本：http://www.meiocodigo.com/projects/meiomask/或者是其他有mask功能的組件定義好mask格式：
$(".dp").datepicker().setMask("9999-19-39")本文來源：http://www.cnblogs.com/lwme/archive/2012/12/08/jquery-ui-datepicker.html