两个日期控件如何关联

本文用的是bootstrap的datetimepicker插件,主要实现了日期控件格式设置为年-月-日,且结束日期不能选择早于开始日期的时间
html代码如下:

<div class="form-group form-inline">    
      <div class="col-lg-4 form-group form-inline">        
            <label class="control-label">开始日期 </label>        
            <div class='input-group date' id='datetimepicker1'>            
                <input type='text' class="form-control"  name="start_date" id="startDate">        
                  <span class="input-group-addon">            
                    <span class="glyphicon glyphicon-calendar"></span>        
                  </span>        
            </div>
      </div>    
      <div class="col-lg-4 form-group form-inline">        
          <label class="control-label">结束日期</label>        
            <div class='input-group date' id='datetimepicker2'>            
                <input type='text' class="form-control" name="end_date"  id="endDate"/>                
                    <span class="input-group-addon">                    
                        <span class="glyphicon glyphicon-calendar"></span>                
                    </span>        
            </div>    
    </div>
</div>

jquery代码如下:

<script type="text/javascript">    
      $(function () {
          $('#datetimepicker1').datetimepicker({
                format: "YYYY-MM-DD"
          });                           
          $('#datetimepicker2').datetimepicker({
              useCurrent: false, 
              format: "YYYY-MM-DD"        
          });        
          $("#datetimepicker1").on("dp.change", function (e) {
              $('#datetimepicker2').data("DateTimePicker").minDate(e.date); 
           });        
          $("#datetimepicker2").on("dp.change", function (e) {
              $('#datetimepicker1').data("DateTimePicker").maxDate(e.date);        
          });   
     });
</script>

浏览器显示如图:

开始日期设为2016-07-12,结束日期不能选择2016-07-12之前的日期
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容