Adrien Lanoie Adrien Lanoie - 7 months ago 17
Javascript Question

Disable the date after select in datepicker

I am facing a problem to disable the date on datepicker after select any date.

My HTML Markup :

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 Which i used :

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

I got that useful script on JsFiddle. There date disabling properly after select 1 date. But i need to use that for 7 date. So anyone help me to use that useful script for me in my jsfiddle example!

## I want date will be just disable after select. It will be unavailable to select next.

Answer

Here you are a different version where the dates are not available when it is selected in the input fields, 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;
} 
Comments