2个输入/文本框和限制范围

我使用带有两个输入框的jQuery Datepicker小部件,一个用于“From”日期,另一个用于“To”日期。 我使用jQuery Datepicker功能演示作为获取两个输入框互相协作​​的基础,但我需要能够添加这些附加限制:

  • 日期范围不得早于2008年12月1日

  • “到”日期不能晚于今天

  • 一旦一个“开始”日期被选择时,“到”日期只能是“从”日期之后的范围为7天内

  • 如果首先选择“收件人”日期,则“发件人”日期只能在“至”日期前的7天范围内(限制12月01日为第一个可选日期)

  • 我似乎无法让所有上述工作在一起。

    总之,我希望能够在12月1日到今天之间选择长达7天的范围(我意识到我在12月1日发布此消息,因此只能在今天获得)。

    我的代码到目前为止

    $(function () {
    
    $('#txtStartDate, #txtEndDate').datepicker(
                {
                showOn: "both",
                beforeShow: customRange,
                dateFormat: "dd M yy",
                firstDay: 1, 
                changeFirstDay: false
                });
    });
    
    function customRange(input) 
    { 
    
    return {
             minDate: (input.id == "txtStartDate" ? new Date(2008, 12 - 1, 1) : null),
             minDate: (input.id == "txtEndDate" ? $("#txtStartDate").datepicker("getDate") : null), 
             maxDate: (input.id == "txtStartDate" ? $("#txtEndDate").datepicker("getDate") : null)
           }; 
    }
    

    我错过了7天范围限制,并且在2008年12月1日之前或今天之后阻止了“至”日期选择。 任何帮助将不胜感激,谢谢。


    非常感谢您的帮助本,我已经建立在您的帖子上,并拿出了这个。 它现在完成并且出色地工作!

    这是一个工作演示 。 添加/编辑到URL以查看代码

    完整的代码如下 -

    $(function () 
    {   
        $('#txtStartDate, #txtEndDate').datepicker({
            showOn: "both",
            beforeShow: customRange,
            dateFormat: "dd M yy",
            firstDay: 1, 
            changeFirstDay: false
        });
    
    });
    
    function customRange(input) { 
        var min = new Date(2008, 11 - 1, 1), //Set this to your absolute minimum date
            dateMin = min,
            dateMax = null,
            dayRange = 6; // Set this to the range of days you want to restrict to
    
        if (input.id === "txtStartDate") {
            if ($("#txtEndDate").datepicker("getDate") != null) {
                dateMax = $("#txtEndDate").datepicker("getDate");
                dateMin = $("#txtEndDate").datepicker("getDate");
                dateMin.setDate(dateMin.getDate() - dayRange);
                if (dateMin < min) {
                    dateMin = min;
                }
            }
            else {
                dateMax = new Date; //Set this to your absolute maximum date
            }                      
        }
        else if (input.id === "txtEndDate") {
            dateMax = new Date; //Set this to your absolute maximum date
            if ($("#txtStartDate").datepicker("getDate") != null) {
                dateMin = $("#txtStartDate").datepicker("getDate");
                var rangeMax = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + dayRange);
    
                if(rangeMax < dateMax) {
                    dateMax = rangeMax; 
                }
            }
        }
        return {
            minDate: dateMin, 
            maxDate: dateMax
        };     
    }
    

    好的,这个怎么样:

    function customRange(input) 
    { 
        var min = new Date(2008, 12 - 1, 1);
        var dateMin = min;
        var dateMax = null;
    
        if (input.id == "txtStartDate" && $("#txtEndDate").datepicker("getDate") != null)
        {
            dateMax = $("#txtEndDate").datepicker("getDate");
            dateMin = $("#txtEndDate").datepicker("getDate");
            dateMin.setDate(dateMin.getDate() - 7);
            if (dateMin < min)
            {
                dateMin = min;
            }           
        }
        else if (input.id == "txtEndDate")
        {
            dateMax = new Date();
            if ($("#txtStartDate").datepicker("getDate") != null)
            {
                dateMin = $("#txtStartDate").datepicker("getDate");
                dateMax = $("#txtStartDate").datepicker("getDate");
                dateMax.setDate(dateMax.getDate() + 7); 
            }
        }
        return {
         minDate: dateMin, 
         maxDate: dateMax
       }; 
    
    }
    

    这是我能想到的最好的,满足你所有的要求(我认为...)


    我意识到我对派对有点晚了,但这里是我如何修改工作示例代码。 我不需要设置特定的最大和最小日期,只是不希望日期范围重叠,所以我只是让他们设置对方:

    jQuery(function() {
      jQuery('#calendardatetime_required_to, #calendardatetime_required_from').datepicker('option', {
        beforeShow: customRange
      });
    });
    
    function customRange(input) {
      if (input.id == 'calendardatetime_required_to') {
        return {
          minDate: jQuery('#calendardatetime_required_from').datepicker("getDate")
        };
      } else if (input.id == 'calendardatetime_required_from') {
        return {
          maxDate: jQuery('#calendardatetime_required_to').datepicker("getDate")
        };
      }
    }
    

    (我的日期选择器已经在脚本中被初始化了,但它只是默认设置。)

    似乎做我需要它:)

    看到我的例子。

    链接地址: http://www.djcxy.com/p/68481.html

    上一篇: 2 inputs/textboxes and restricting range

    下一篇: Can it handle multiple dates?