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 });
　　//初始化

未完，继续添加...

转载于:https://www.cnblogs.com/aissd/p/4953954.html