datetimepicker时间控件控制前后日期(开始日期不能大于结束日期)互相限制

$(function () {
    //开始日期1 可选择时间
    //$("#fld_FROMDATE").datetimepicker({
    //    format: 'yyyy-mm-dd hh:ii:ss',
    //    minuteStep: 1,
    //    minView: 'hour',
    //    language: 'zh-CN',
    //    pickerPosition: 'bottom-right',
    //    autoclose: true,
    //}).on("click", function () {
    //    $("#fld_FROMDATE").datetimepicker("setEndDate", $("#fld_ENDDATE").val());//点击了结束日期1之后限制开始时间1的最晚日期
    //});

    $("#fld_FROMDATE").datetimepicker("setDate", new Date('2019 / 09 / 17 08:00'));//自定义时间
    document.getElementById("fld_FROMDATE").disabled = true;//禁用该时间控件

    $(document).on("click", "#fld_FROMDATE", function () {
        $('#fld_FROMDATE').datetimepicker('show');
    });

    //开始日期2
    $("#fld_BEGIN").datetimepicker({
        format: 'yyyy-mm-dd hh:ii:ss',
        minuteStep: 1,
        minView: 'hour',
        language: 'zh-CN',
        pickerPosition: 'bottom-right',
        autoclose: true,
    }).on("click", function () {
        $("#fld_BEGIN").datetimepicker("setEndDate", $("#fld_ENDDATE").val());//最晚时间为结束时间1的时间
        if ($("#fld_END").val() != "") {
            $("#fld_BEGIN").datetimepicker("setEndDate", $("#fld_END").val());//如果结束时间2的时间不为空时,最晚时间为结束时间2的时间
        }
        $("#fld_BEGIN").datetimepicker("setStartDate", $("#fld_FROMDATE").val());//最早时间为开始时间1的时间
    });
    $(document).on("click", "#fld_BEGIN", function () {
        $('#fld_BEGIN').datetimepicker('show');
    });

    //结束日期1 可选择时间
    //$("#fld_ENDDATE").datetimepicker({
    //    format: 'yyyy-mm-dd hh:ii:ss',
    //    minuteStep: 1,
    //    minView: 'hour',
    //    language: 'zh-CN',
    //    autoclose: true,
    //}).on("click", function () {
    //    $("#fld_ENDDATE").datetimepicker("setStartDate", $("#fld_FROMDATE").val());//
    //});

    $("#fld_ENDDATE").datetimepicker("setDate", new Date('2019 / 09 / 27 18:00'));//自定义时间
    document.getElementById("fld_ENDDATE").disabled = true;//禁用该时间控件


    $(document).on("click", "#fld_ENDDATE", function () {
        $('#fld_ENDDATE').datetimepicker('show');
    });

    //结束日期2
    $("#fld_END").datetimepicker({
        format: 'yyyy-mm-dd hh:ii:ss',
        minuteStep: 1,
        minView: 'hour',
        language: 'zh-CN',
        autoclose: true,
    }).on("click", function () {
        $("#fld_END").datetimepicker("setStartDate", $("#fld_FROMDATE").val());//最早时间为开始时间1的时间
        if ($("#fld_BEGIN").val()!="") {
            $("#fld_END").datetimepicker("setStartDate", $("#fld_BEGIN").val());//如果开始时间2的时间不为空时,最早时间为开始时间2的时间
        }
        $("#fld_END").datetimepicker("setEndDate", $("#fld_ENDDATE").val());//最晚时间为结束时间1的时间
    });
    $(document).on("click", "#fld_END", function () {
        $('#fld_END').datetimepicker('show');
    });

    document.getElementById("fld_DAYS").disabled = true;//禁用该文本框

    //计算出开始时间和结束时间的相隔时间(天)
    $("body").mouseover(function () {
        var begintime = $("#fld_FROMDATE").val();
        var endtime = $("#fld_ENDDATE").val();
        if (begintime == "" || endtime == "") {
            return;
        }
        var startDate = Date.parse(begintime.replace('/-/g', '/'));
        var endDate = Date.parse(endtime.replace('/-/g', '/'));
        var diffDate = (endDate - startDate) + 1 * 24 * 60 * 60 * 1000;
        var days = diffDate / (1 * 24 * 60 * 60 * 1000);
        //判断是否为整数,如果不为整数,则数值加一取整
        if (days % 1 != 0) {
            days += 1;
            days = Math.floor(days);
        }
        document.getElementById("fld_DAYS").value = days;
    })
})

页面效果图
页面效果

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值