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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。