码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap-datetimepicker时间控件的使用

时间:2017-07-20 12:54:49      阅读:489      评论:0      收藏:0      [点我收藏+]

标签:calendar   str   code   orm   type   format   start   var   demo   

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

bootstrap-datetimepicker时间控件的使用

标签:calendar   str   code   orm   type   format   start   var   demo   

原文地址:http://www.cnblogs.com/300js/p/7210443.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!