简体   繁体   English

禁用JQuery日历的先前日期

[英]Disable the previous dates of JQuery Calendar

I am taking 4 datepicker calendar,and i want to disable the dates of previous selected date.. I got some idea from JQuery date picker but its fine for 2 date pickers but i have to use 4 datepickers. 我正在使用4 datepicker日历,我想禁用上一个选定日期的日期。.我从JQuery日期选择器中了解了一些想法,但对于2个日期选择器来说很好,但是我必须使用4个datepickers。 So if any one has Solution just share with me.. For two date picker this is the code: 因此,如果有人有解决方案,请与我分享。对于两个日期选择器,这是代码:

$(function() {
    var dates = $( "#txt1, #txt2" ).datepicker({
        minDate:0,
        maxDate:"+1Y",
        defaultDate: "+1w",
        dateFormat:'dd-mm-yy',
        numberOfMonths: 3,
        onSelect: function( selectedDate ) {
            var option = this.id == "txt1" ? "minDate" : "maxDate",
                instance = $( this ).data( "datepicker" ),
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat, selectedDate, instance.settings );
            dates.not( this ).datepicker( "option", option, date );
        }
    });
});

If your text inputs have ids of txt1 through txt4 then something simple like this would work: 如果您的文本输入的idstxt4txt1 ,则可以使用类似以下的简单方法:

onSelect: function(date) {
    for(var i = 0; i < dates.length; ++i) {
        if(dates[i].id < this.id)
            $(dates[i]).datepicker('option', 'maxDate', date);
        else if(dates[i].id > this.id)
            $(dates[i]).datepicker('option', 'minDate', date);
    }
}

Demo: http://jsfiddle.net/ambiguous/Rtbph/ 演示: http//jsfiddle.net/ambiguous/Rtbph/

An alternative that doesn't require your id attributes to compare nicely would use index thusly: 一个不需要您的id属性很好地进行比较的替代方法将因此使用index

var dates = $('#first, #second, #third, #fourth').datepicker({
    // ...
    onSelect: function(date) {
        var me = dates.index(this);
        for(var i = 0; i < dates.length; ++i) {
            if(i < me)
                $(dates[i]).datepicker('option', 'maxDate', date);
            else if(i > me)
                $(dates[i]).datepicker('option', 'minDate', date);
        }
    }
});

Then you'd just have to make sure that your initial selector, $('#first, #second, #third, #fourth') , put the inputs in the proper left to right order. 然后,您只需要确保您的初始选择器$('#first, #second, #third, #fourth')将输入按正确的从左到右顺序排列即可。

Demo: http://jsfiddle.net/ambiguous/xaVZM/ 演示: http//jsfiddle.net/ambiguous/xaVZM/

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM