bootstrap-datetimepicker插件双日期的设置
效果:第二个日期控件选中的时间不能小于第一个
1、页面上需要引用
css:
<link rel="stylesheet" href="css/bootstrap.min.css" /> //这个也要引入,否则页面样式会出问题 <link rel="stylesheet" href="plugin/css/bootstrap-datetimepicker.css" />
js:
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script> <script src="js/bootstrap.min.js"></script> <script src="plugin/js/bootstrap-datetimepicker.js"></script> <script src="plugin/js/bootstrap-datetimepicker.zh-CN.js"></script>
2、直接在input上调用 datetimepicker()
<input size="16" type="text" id="datetimeStart" readonly class="form_datetime"> -- <input size="16" type="text" id="datetimeEnd" readonly class="form_datetime">
效果:
js代码:
<script type="text/javascript"> $("#datetimeStart").datetimepicker({ format: 'yyyy-mm-dd', minView:'month', language: 'zh-CN', autoclose:true, startDate:new Date() }).on("click",function(){ $("#datetimeStart").datetimepicker("setEndDate",$("#datetimeEnd").val()) }); $("#datetimeEnd").datetimepicker({ format: 'yyyy-mm-dd', minView:'month', language: 'zh-CN', autoclose:true, startDate:new Date() }).on("click",function(){ $("#datetimeEnd").datetimepicker("setStartDate",$("#datetimeStart".val())) }); </script>
3、组件的方式使用
<label class="labe_l">发货日期:</label> <div class="clearfix tex_t reset_text"> <div class="input-append date fl" id="datetimeStart"> <input type="text" class="" readonly> <span class="add-on"><i class="icon-th"></i></span> </div> <span class="to_link">至</span> <div class="input-append date fl" id="datetimeEnd"> <input type="text" class="" readonly> <span class="add-on"><i class="icon-th"></i></span> </div> </div>
效果:
js代码:
<script> //日期插件初始化 $('#datetimeStart').datetimepicker({ language: 'zh-CN', format:'yyyy-mm-dd', weekStart: 1, /*以星期一为一星期开始*/ todayBtn: 1, autoclose: 1, minView:2, /*精确到天*/ pickerPosition: "bottom-left" }).on("changeDate",function(ev){ //值改变事件 //选择的日期不能大于第二个日期控件的日期 if(ev.date){ $("#datetimeEnd").datetimepicker('setStartDate', new Date(ev.date.valueOf())); }else{ $("#datetimeEnd").datetimepicker('setStartDate',null); } }); $('#datetimeEnd').datetimepicker({ language: 'zh-CN', format:'yyyy-mm-dd', weekStart: 1, /*以星期一为一星期开始*/ todayBtn: 1, autoclose: 1, minView:2, /*精确到天*/ pickerPosition: "bottom-left" }).on("changeDate",function(ev){ //选择的日期不能小于第一个日期控件的日期 if(ev.date){ $("#datetimeStart").datetimepicker('setEndDate', new Date(ev.date.valueOf())); }else{ $("#datetimeStart").datetimepicker('setEndDate',new Date()); } }); </script>