jQuery UI日期选择器范围选择器问题

jQuery UI datepicker range selector issue

本文关键字：选择器 范围 问题 日期 UI jQuery      更新时间：2023-09-26

在这个答案的帮助下创建了带有范围选择器的日期选择器当我们选择从"5月1日"到"8月1日）的日期时，用户无法更改"从"5月1号之前的日期。在这种情况下，是否有任何解决方案，而不是不允许用户浏览日期超过最小日期。应该允许用户转到前一个。日期，但发出警报或通知他们选择了错误的日期范围。

代码片段：信用

$(function() {
    $("#from-datepicker").datepicker({
        dateFormat: "dd-M-yy",
        maxDate: "-1d",
        onClose: function (selectedDate) {             
            // Set 'TO' minDate
            $("#to-datepicker").datepicker("option", "minDate", selectedDate);             
            // Set 'TO' maxDate at 3 months if before yesterday
            var dt = new Date($(this).datepicker("getDate"));
            dt.setMonth(dt.getMonth() + 3);
            if(dt < Date.now()) {
                $("#to-datepicker").datepicker("option", "maxDate", dt);
            }
        }
    });
    $("#to-datepicker").datepicker({
        dateFormat: "dd-M-yy",
        maxDate: "-1d",
        onClose: function (selectedDate) {
            // Set 'FROM' maxDate
            $("#from-datepicker").datepicker("option", "maxDate", selectedDate);
            // Set 'FROM' minDate at 3 months if before yesterday
            var dt = new Date($(this).datepicker("getDate"));
            dt.setMonth(dt.getMonth() - 3);
            if(dt < Date.now()) {
                $("#from-datepicker").datepicker("option", "minDate", dt);
            }
        }
    });
});

http://jsfiddle.net/4Ln0cxpq/

在JsFiddle 中尝试此操作

$(function() {
    $("#from-datepicker").datepicker({
        dateFormat: "dd-M-yy",
        onClose: function (selectedDate) {             
            var dt = new Date($(this).datepicker("getDate"));
            var dtTo = new Date($("#to-datepicker").datepicker("getDate"));
            if($("#to-datepicker").val()!="" && dt > dtTo) {
                $("#from-datepicker").val("");
                alert("selected date greater than 'To' date");
            }
        }
    });
    $("#to-datepicker").datepicker({
        dateFormat: "dd-M-yy",
        onClose: function (selectedDate) {
            var dt = new Date($(this).datepicker("getDate"));
            var dtFrom = new Date($("#from-datepicker").datepicker("getDate"));
            if($("#from-datepicker").val()!="" && dt<dtFrom){
                $("#to-datepicker").val("");
                alert("selected date less than 'From' date");
            }
        }
    });
});

您的代码设置-3,+3个月。

试试这个小提琴：JSFiddle

您可以删除以下内容：

// Set 'TO' minDate
            $("#to-datepicker").datepicker("option", "minDate", selectedDate);

这个：

 // Set 'FROM' maxDate
            $("#from-datepicker").datepicker("option", "maxDate", selectedDate);

如果FROM大于TO，则添加您的复选框，如果为True，则显示您的自定义通知

DEMO

相关文章：