Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jquery UI Datpicker excluding weekends minDate

How do I make jQuery UI datepicker exclude weekends and also set minDate to a certain value like +2 / +3 (excluding weekends) ???

What I've tried:

$("#txtFromDate").datepicker({
    minDate: 4, 
    beforeShowDay: $.datepicker.noWeekends,
    changeMonth: true,
    changeYear: true
});
<input type="text" id="txtFromDate" />

For example When I select a Monday (like today 10th) and give 'minDate' as 10 , from 24th onwards should be enabled.

Can anyone please help me out? I want to be able to calculate the minDate value without including Saturdays and Sundays.

FIDDLE- http://jsfiddle.net/betrob/7DHVr/2/

Thank you

like image 308
BetRob Avatar asked Mar 21 '23 15:03

BetRob


2 Answers

You can do the calculation manually and pass the next working day to the minDate like this.

// Calculate the next working day manually
    var startDate = new Date(),
    noOfDaysToAdd = 10,
    count = 1;

while(count <= noOfDaysToAdd){
    startDate.setDate(startDate.getDate() + 1);
    if(startDate.getDay() != 0 && startDate.getDay() != 6){
        count++;
    }
}

// Datepicker Init
$('#txtFromDate').datepicker({
    minDate: startDate,
    beforeShowDay: $.datepicker.noWeekends,
    changeMonth: true,
    changeYear: true
});

Here is a working demo. DEMO

like image 139
Shiva Avula Avatar answered Apr 06 '23 14:04

Shiva Avula


I have tried to optimize @Shiva logic to make it more faster. Hope its help, please feel free to point out any improvements or loopholes. :)

DEMO

var count = 10;
//Add the 2 days of weekend in numer of days .
var d = new Date();
count = count + (parseInt(count/5))*2;
d.setDate(d.getDate() +count);
//suppose its ending on weekend day then increment them manually.
if(d.getDay()>5) {  d.setDate(d.getDate()+ (d.getDay()-5)) ; } 

$(document).ready(function () {
   $("#txtFromDate").datepicker(
       { minDate: d, 
                beforeShowDay: $.datepicker.noWeekends,
                changeMonth: true,
                changeYear: true});
 });

Update: A bit more optimized.

like image 43
Neha Avatar answered Apr 06 '23 14:04

Neha