页面自行引入 jquery.min.js / bootstrap.min.js / datepicker.css / bootstrap-datepicker.js 等
页面结构:
<div class="span6">
<div class="control-group">
<div class="part-left">
<label class="control-label">启用时间:</label>
<div class="controls">
<div data-date="" id="startTimeDiv" class="input-append date datepicker">
<input name="startTime" id="startTime" value="" style="width: 150px;" data-date-format="yyyy-mm-dd" readonly="readonly" class="span11 form_datetime" type="text">
<span class="add-on"><i class="icon-th"></i></span>
</div>
-
<div data-date="" id="endTimeDiv" class="input-append date datepicker">
<input name="endTime" id="endTime" value="" style="width: 150px;" data-date-format="yyyy-mm-dd" readonly="readonly" class="span11 form_datetime" type="text">
<span class="add-on"><i class="icon-th"></i></span>
</div>
</div>
</div>
</div>
</div>
js:
$("#startTimeDiv").datetimepicker({
format: 'yyyy-mm-dd',
minView:'month',
language: 'zh-CN',
}).on("click",function(){
$("#startTimeDiv").datetimepicker("setEndDate",$("#endTime").val())
});
$("#endTimeDiv").datetimepicker({
format: 'yyyy-mm-dd',
minView:'month',
language: 'zh-CN',
}).on("click",function(){
$("#endTimeDiv").datetimepicker("setStartDate",$("#startTime").val())
});
效果图: