jquery-ui裏日期插件的使用

HTML爲

        <input type="text" id="starttime" readonly />
        <input type="text" id="endtime" readonly />

設置readonly屬性，則輸入框不可寫；

引入必要的js文件和css文件

        <link rel="stylesheet" type="text/css" href="jquery-ui.css" />
        <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
        <script type="text/javascript" src="jquery-ui.js"></script>

若是要用到中文的，要引入如下js文件

        <script type="text/javascript" src="datepicker_cn.js"></script>

還需在頁面加載後初始化該插件

 1             $(function(){
 2                 /*
 3                  * 初始化日期插件
 4                  */
 5                 $('#starttime').datepicker({
 6                     onSelect : function(dateText, inst) {
 7                         $("#endtime").datepicker("option", "minDate", dateText);
 8                     },
 9                     showButtonPanel : true,
10                     inline : true
11                 });
12                 
13                 $('#endtime').datepicker({
14                     onSelect : function(dateText, inst) {
15                         $("#starttime").datepicker("option", "maxDate", dateText);
16                     },
17                     showButtonPanel : true,
18                     inline : true
19                 });
20             });

若要限制開始時間必須從今天開始，不可選昨天之前的，在上面初始化後可繼續追加一句

1     //限制開始時間最小爲今天
2     $('#txtbegintime').datepicker('option', 'minDate', '0');

若只想使用時分秒的時間插件，則須要引入如下js文件和css文件

 　　　　<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
        <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
        <script type="text/javascript" src="jquery-ui.js"></script>
        <script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
        <script type="text/javascript" src="jquery-ui-timepicker-zh-CN.js"></script> //中文

1 $(function(){
2     $("#starttime").timepicker();
3     $(".timeinput").timepicker();
4 });
　　//初始化

未完，繼續添加...