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 });
//初始化
未完，继续添加...
原文：http://www.cnblogs.com/aissd/p/4953954.html