基于 bootstrap-datetimepicker 联动

先看一下 层级联动的案例

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

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

下面看封装代码

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:最先显示时间 或者层级

  

  

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值