官方文檔:http://www.bootcss.com/p/bootstrap-datetimepicker/demo.htm
常規使用:
<div class="input-group date form_datetime" id="sform"> <input class="form-control data-form-start" type="text" placeholder="開始時間" name="start_time" id="start_time" readonly="true" value="" /> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> </div> <div class="input-group date form_datetime" id="eform"> <input class="form-control data-form-start" type="text" placeholder="結束時間" name="end_time" id="end_time" readonly="true" value="" /> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> </div>
$(".form_datetime").datetimepicker({ format:'yyyy/mm/dd', language:'zh-CN', minView: "month", todayBtn: 1, autoclose: 1, })
開始時間,結束時間的使用:
注意:開始時間必須小於結束時間,結束時間必須大於開始時間
$("#sform").datetimepicker({ format:'yyyy/mm/dd', language:'zh-CN', minView: "month", todayBtn: 1, autoclose: 1, }).on('show', function (ev) {//在控件顯示時就觸發事件 var etime = $("#end_time").val();//獲取結束時間 $("#sform").datetimepicker('setEndDate', etime);//給開始控件設置一個結束的日期。 }); $("#eform").datetimepicker({ format:'yyyy/mm/dd', language:'zh-CN', minView: "month", todayBtn: 1, autoclose: 1, }).on('show', function (ev) { var stime = $("#start_time").val(); $("#eform").datetimepicker('setStartDate', stime);//給結束控件設置一個開始日期 });
參考文檔:http://blog.csdn.net/gwpjava/article/details/48542121
http://www.bootcss.com/p/bootstrap-datetimepicker/demo.htm