当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 基于 Bootstrap Datetimepicker 联动

基于 Bootstrap Datetimepicker 联动

2017年12月12日  | 移动技术网IT编程  | 我要评论

先看一下 层级联动的案例

先选择前面时间后  后面的时间不要超过前面的时间

先选择后面的时间后，前面的时间不要少于后面的时间

下面看封装代码

function initdatetimepicker(starttime, endtime, timeformat, minview) { 
  $(starttime).datetimepicker("remove"); 
  $(starttime).datetimepicker({ 
    language: sessionstorage.getitem("lang"), 
    autoclose: true, 
    todayhighlight: true, 
    enddate: new date(), 
    format: timeformat, 
    startview: minview, 
    minview: minview, 
  }).on("changedate", function() { 
    var value = $(starttime).val(); 
    $(endtime).datetimepicker("remove"); 
    $(endtime).datetimepicker({ 
      language: sessionstorage.getitem("lang"), 
      autoclose: true, 
      todayhighlight: true, 
      enddate: new date(), 
      startdate: value, 
      format: timeformat, 
      startview: minview, 
      minview: minview, 
    }) 
  }); 
  $(endtime).datetimepicker("remove"); 
  $(endtime).datetimepicker({ 
    language: sessionstorage.getitem("lang"), 
    autoclose: true, 
    todayhighlight: true, 
    enddate: new date(), 
    format: timeformat, 
    startview: minview, 
    minview: minview, 
  }).on("changedate", function() { 
    var value = $(endtime).val(); 
    $(starttime).datetimepicker("remove"); 
    $(starttime).datetimepicker({ 
      language: sessionstorage.getitem("lang"), 
      autoclose: true, 
      todayhighlight: true, 
      enddate: value, 
      format: timeformat, 
      startview: minview, 
      minview: minview, 
    }) 
  }); 
}

初始化datetimepicker及起止时间双向联动公共方法 starttime:起始时间输入框id号，例如：'#archivestarttime'

 endtime:结束时间输入框id号，例如：'#archiveendtime' timeformat:时间格式，例如：'yyyy-mm-dd',

 minview:最先显示时间 或者层级

总结

以上所述是小编给大家介绍的bootstrap datetimepicker 联动，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网