HTML為

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

設(shè)置readonly屬性，則輸入框不可寫(xiě)；

引入必要的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>

還需在頁(yè)面加載后初始化該插件

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 });

若要限制開(kāi)始時(shí)間必須從今天開(kāi)始，不可選昨天以前的，在上面初始化后可繼續(xù)追加一句

1 //限制開(kāi)始時(shí)間最小為今天 2 $('#txtbegintime').datepicker('option', 'minDate', '0');

若只想使用時(shí)分秒的時(shí)間插件，則需要引入以下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 });
　　//初始化

未完，繼續(xù)添加...

轉(zhuǎn)載于:https://www.cnblogs.com/aissd/p/4953954.html

總結(jié)

以上是生活随笔為你收集整理的jquery-ui里日期插件的使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。