bootstrap-datetimepicker時間控件的使用


官方文檔: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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM