CODEWITHSUNDEEP
jquerydatepicker
Leandro Cusack
Leandro Cusack

Reputation: 369

Jquery UI datepicker restricted selection [Working days]

SOLVED: http://jsfiddle.net/YV34P/5/

I am trying to set up datepicker to restrict selection range to 5 days.

This is ok and working, but the problem that this days must be 'working days', without Sundays and Saturdays, this means that if I choose Friday 18 May, my limit will be Thursday 24 May.

Any idea? I have the following codes: 

$('.datepicker').datepicker({
            dayNames: ["Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sábado"],
            dayNamesMin: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"],
            monthNames: ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],
            //dateFormat: "DD, dd MM yy",
            //altFormat: "DD, dd MM yy",
            dateFormat: "dd M yy",
            showAnim: "drop",
            beforeShow: LimitaRango,
            beforeShowDay: $.datepicker.noWeekends
    });

function LimitaRango(input){
    if (input.id == 'FechaHasta'){
        var minDate = new Date($('#FechaDesde').val());
        minDate.setDate(minDate.getDate() + 1);
        var maxDate = new Date($('#FechaDesde').val());
        maxDate.setDate(maxDate.getDate() + 5);
        return {
            minDate: minDate,
            maxDate: maxDate
            };
        }
}

And this HTML: 

<tr>
      <td>Fecha Desde:</td>
      <td colspan="2"><input type="text" name="FechaDesde" size="40" class="datepicker" id="FechaDesde"></td>
</tr>    
<tr>
      <td>Fecha Hasta:</td>
      <td colspan="2"><input type="text" name="FechaHasta" size="40" class="datepicker" id="FechaHasta"></td>
    </tr>

PS: Thank you very much for the help given, but the problem is recognizing weekends. Now, I have this working, but if the user selects "Friday", my objective is to limit his selection up to Thursday, but now, with this code, it is limited to "Thuesday" because Weekends are included in counting "5 days" from the selected start day.

Upvotes: 0

Views: 4722

Answers (3)

Roy Burnap
Roy Burnap

Reputation: 21

What you want is any time from today up to six days into the future. Hence, you need to set the option maxDate.

var maxd = Date();
maxd.setTime( maxd.getTime() + (1000 * 3600 * 24 * 6) );
$('.datepicker').datepicker({
    ... // existing options
    maxDate: maxd,
});

Upvotes: 2

Imdad
Imdad

Reputation: 6042

Use beforeShowDay event for restricting dates selectability. if this function returns false that date won't be active

i.e.

beforeShowDay:
function(date) {
    var dayOfWeek = date.getUTCDay();
    if(dayOfWeek ==0 || dayOfWeek ==6) //0= Sunday 6= Saturday
    {
      return false;

    }
    else
    {
      return true;
    }
}

For more detail see http://jqueryui.com/demos/datepicker/#event-beforeShowDay and jQuery ui datepicker, get Day of week from onSelect

Upvotes: 1

Wouter Konecny
Wouter Konecny

Reputation: 3540

You can disable weekends with the following code:

$("#element").datepicker(
    {
        beforeShowDay: $.datepicker.noWeekends
    }
);

Edit: For disabling specified days, check this out: Can the jQuery UI Datepicker be made to disable Saturdays and Sundays (and holidays)?

Upvotes: 2

Related Questions