javascript - 在日期选择器中选择后禁用日期

标签 javascript jquery jquery-ui jquery-plugins 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

我明白了useful script在 JsFiddle 上。选择 1 个日期后,日期会正确禁用。但我需要用它进行 7 次约会。所以任何人都可以帮助我在我的 jsfiddle 示例中使用这个有用的脚本!

## 我希望日期在选择后被禁用。将无法选择下一步。

最佳答案

这是一个不同的版本,在输入字段中选择日期时,日期不可用,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;
} 

关于javascript - 在日期选择器中选择后禁用日期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25877419/

相关文章:

javascript - 检测手指何时离开屏幕上的对象

javascript - 如何在一组 span 元素之后替换纯文本内容或文本节点?

javascript - 在 jquery 中排序事件

javascript - 如何默认 Html.DropDownList 不选择?

html - 背景剪辑在我的代码中不起作用。 (边界半径/背景出血问题)

javascript - 在 keyup 上获取文本区域中的字符

javascript - 当内容动态变化时强制 PrettyPhoto 刷新

javascript - 使用两个不同的上下文调用 Javascript 函数

jquery - 无法正确定位 html 菜单元素 (Jquery)

jquery - 如何扩展小部件以包含新功能?