Question

我在选择任何日期后在datepicker上禁用日期时遇到问题。

我的HTML标记：

Day 1 <input type="text" id="datepicker1" name="datepicker1" /> <br/>
Day 2 <input type="text" id="datepicker2" name="datepicker2" />  <br/>
Day 3 <input type="text" id="datepicker3" name="datepicker3" /><br/>
Day 4 <input type="text" id="datepicker4" name="datepicker4" /><br/>
Day 5 <input type="text" id="datepicker5" name="datepicker5" /><br/>
Day 6 <input type="text" id="datepicker6" name="datepicker6" /><br/>
Day 7 <input type="text" id="datepicker7" name="datepicker7" /><br/>

我使用过的JavaScript：

var dates = $("#datepicker1, #datepicker2, #datepicker3, #datepicker4, #datepicker5, #datepicker6, #datepicker7").datepicker({
    minDate: "0",
    maxDate: "+2Y",
    defaultDate: "+1w",
    dateFormat: 'mm/dd/yy',
    numberOfMonths: 1,
    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);
        }
    } 
});

My JsFiddle Demo

我在JsFiddle上得到了useful script。选择1日期后，日期会正确禁用。但我需要使用它7日期。所以任何人都可以帮助我在我的jsfiddle示例中为我使用这个有用的脚本！

##我希望日期只会在选择后禁用。它将无法选择下一个。

Answer 1

正如我所理解的那样，您想要禁用在日期字段上选择的日期，并且该日期不应对其余输入字段（datepickers）可用。

我对您的脚本进行了一些更改： http://jsfiddle.net/tfqyakn2/5/

我相信这是你正在寻找的答案。

var disabledDates = [];

var dates = $("#datepicker1, #datepicker2, #datepicker3, #datepicker4, #datepicker5, #datepicker6, #datepicker7").datepicker({
    minDate: "0",
    maxDate: "+2Y",
    defaultDate: "+1w",
    dateFormat: 'mm/dd/yy',
    numberOfMonths: 1,
    onSelect: function(date) {        
        disabledDates.push($(this).val());        
    },
    beforeShowDay: unavailable
});

function unavailable(date) {
    dateZero = ('0' + (date.getMonth()+1)).slice(-2) + '/'
             + ('0' + date.getDate()).slice(-2) + '/'
             + date.getFullYear();    
    if ($.inArray(dateZero, disabledDates) < 0) {
        return [true,"","Available Date"];
    } else {
        return [false,"","Not Available Date"];
    }
}

Answer 2

这里是一个不同的版本，当在输入字段http://jsfiddle.net/tfqyakn2/6/

中选择日期时，日期不可用

var datesMin = [];
var dates = $("#datepicker1, #datepicker2, #datepicker3, #datepicker4, #datepicker5, #datepicker6, #datepicker7").datepicker({
minDate: "+0",
maxDate: "+2Y",
defaultDate: "+1w",
dateFormat: 'mm/dd/yy',
numberOfMonths: 1,
onSelect: function(date) {               
    datesMin.push( new Date( $(this).val() ) );         
},
beforeShow: function() {        
    $(this).datepicker("option", "minDate", maxi());
 }   
});

function sortDates(a, b){
return a.getTime() - b.getTime();
}   

function maxi(){ 
var sorted = datesMin.sort(sortDates);    
var minDate;
if(datesMin.length > 0){
minDate = sorted[sorted.length-1];    
} else {
minDate = 0;    
}
return minDate;
}

在datepicker中选择后禁用日期

2 个答案: