Bootstrap日期控件之日期范围控制

 开始日期不大于结束时间,结束时间不小于开始时间,开始日期和结束日期都不小于当前日期:

DatePicker($("#startDate"), $("#endDate"));
function DatePicker(startDate, endDate) {
    // 仅选择日期
    $("#startDate").datetimepicker({
            language: "zh-CN",
            weekStart: 1,
            autoclose: true,
            startView: 2,
            minView: 2,
            format: "yyyy-mm-dd",
            startDate: new Date(),
            forceParse: false,
        }).on('changeDate', function (ev) {
        if (ev.date) {
            $(endDate).datetimepicker('setStartDate', new Date(ev.date.valueOf()))
        } else {
            $(endDate).datetimepicker('setStartDate', null);
        }
    })

    $("#endDate").datetimepicker({
            language: "zh-CN",
            autoclose: true,
            startView: 2,
            minView: 2,
            format: "yyyy-mm-dd",
            startDate: new Date()
        }).on('changeDate', function (ev) {
        if (ev.date) {
            $(startDate).datetimepicker('setEndDate', new Date(ev.date.valueOf()))
        } else {
            $(startDate).datetimepicker('setEndDate', new Date());
        }

    })
}

可简化为:

function DatePicker(startDateInput, endDateInput) {
    // 仅选择日期
    startDateInput.on('changeDate', function (ev) {
        if (ev.date) {
            $(endDateInput).datetimepicker('setStartDate', new Date(ev.date.valueOf()))
        } else {
            $(endDateInput).datetimepicker('setStartDate', null);
        }
    })
    endDateInput.on('changeDate', function (ev) {
        if (ev.date) {
            $(startDateInput).datetimepicker('setEndDate', new Date(ev.date.valueOf()))
        } else {
            $(startDateInput).datetimepicker('setEndDate', new Date());
        }
    })
}

要清空日期的关联的时候只要重新将startDate和endDate重新赋值即可

代码如下:

function clearDatePicker(startDateInput, endDateInput) {
    // 仅选择日期
    startDateInput.datetimepicker('setEndDate', new Date());
    startDateInput.datetimepicker('setStartDate',null);

    endDateInput.datetimepicker('setStartDate', null);
    endDateInput.datetimepicker('setEndDate', new Date());
} 

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值