基于Bootstrap Datetimepicker联动

先看一下层级联动的案例

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

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

下面看封装代码

 

函数initDateTimePicker（startTime，endTime，timeFormat，minview）{ 

  $（开始时间）.datetimepicker（ “删除”）; 

  $（开始时间）.datetimepicker（{ 

    language：sessionStorage.getItem（“lang”）， 

    autoclose：true， 

    今天高光：真， 

    endDate：new Date（）， 

    格式：timeFormat， 

    startView：minview， 

    minView：minview， 

  }）。on（“changeDate”，function（）{ 

    var value = $（startTime）.val（）; 

    $（结束时间）.datetimepicker（ “删除”）; 

    $（结束时间）.datetimepicker（{ 

      language：sessionStorage.getItem（“lang”）， 

      autoclose：true， 

      今天高光：真， 

      endDate：new Date（）， 

      startDate：value， 

      格式：timeFormat， 

      startView：minview， 

      minView：minview， 

    }） 

  }）; 

  $（结束时间）.datetimepicker（ “删除”）; 

  $（结束时间）.datetimepicker（{ 

    language：sessionStorage.getItem（“lang”）， 

    autoclose：true， 

    今天高光：真， 

    endDate：new Date（）， 

    格式：timeFormat， 

    startView：minview， 

    minView：minview， 

  }）。on（“changeDate”，function（）{ 

    var value = $（endTime）.val（）; 

    $（开始时间）.datetimepicker（ “删除”）; 

    $（开始时间）.datetimepicker（{ 

      language：sessionStorage.getItem（“lang”）， 

      autoclose：true， 

      今天高光：真， 

      endDate：value， 

      格式：timeFormat， 

      startView：minview， 

      minView：minview， 

    }） 

  }）; 

}

初始化datetimepicker及起止时间双向联动公共方法startTime：起始时间输入框id号，例如：'＃archiveStartTime'

 endTime：结束时间输入框id号，例如：'＃archiveEndTime'timeFormat：时间格式，例如：'yyyy-mm-dd'

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

 

网站北京建设  http://www.wangzhanjianshegs.com/  

转载于:https://www.cnblogs.com/1584779745qq/p/7339691.html