zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    以定位为核心的互联网产品思维
    互联网服务有两种,1是靠软件卖产品,2是靠卖软件盈利
    以用户为核心的互联网思维
    xpath定位详解
    jmeter性能测试的经验总结
    IT男的”幸福”生活"续2
    MySql索引数据结构
    机器学习第四章学习记录和心得
    《机器学习》第一次作业——第一至三章学习记录和心得
    华为云使用初探
  • 原文地址:https://www.cnblogs.com/300js/p/7210443.html
Copyright © 2011-2022 走看看