0

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.

Leandro Cusack
  • 359
  • 1
  • 6
  • 21

3 Answers3

2

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)?

Community
  • 1
  • 1
Wouter Konecny
  • 3,260
  • 3
  • 19
  • 26
  • Thank you, I am implemmenting this. The main issue is how to recognize Sundays and Saturdays and count 5 'working days' without counting both (weekends) – Leandro Cusack May 14 '12 at 14:01
  • Check out my latest edit, you might find interesting information there. – Wouter Konecny May 14 '12 at 14:03
  • Yes I am trying with that but it is a mess, nothing works. Extremely buggy, all the calendar. I will upload it to fiddle so that you could take a look at it – Leandro Cusack May 14 '12 at 15:00
  • here it is the fiddle: http://jsfiddle.net/YV34P/. Take a look, then select Fecha Hasta: friday May 18 and look what happens – Leandro Cusack May 14 '12 at 15:10
2

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,
});
Roy Burnap
  • 21
  • 2
1

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

Community
  • 1
  • 1
Imdad
  • 5,942
  • 4
  • 33
  • 53
  • Thank you very much, 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. – Leandro Cusack May 14 '12 at 14:10
  • That is simple. You can do it like (inside your function) you can also get the day of week `dayOfWeek = minDate.getUTCDay(); if(dayOfWeek!=1) { days_to_add=7; } else { days_to_add=5; } ` – Imdad May 14 '12 at 14:21
  • After that in maxDate parameter you can pass it like `maxDate:"+"+days_to_add+"D"` Which means `maxDate:"+5D"` or `maxDate:"+7D"` – Imdad May 14 '12 at 14:24
  • Thank you, I think that this method is the best, I will try to make it work, thanks. I will comment again with results... – Leandro Cusack May 14 '12 at 14:34
  • Not working. It is buggy, I do not know why, sometimes it let me select one or two days, and sometimes it let me select nothing... – Leandro Cusack May 14 '12 at 14:57
  • here it is the fiddle: jsfiddle.net/YV34P. Take a look, then select Fecha Hasta: friday May 18 and look what happens – Leandro Cusack May 14 '12 at 15:11
  • If you put maxDate: +7D, it counts seven days starting from TODAY, how could I modify this TODAY var? – Leandro Cusack May 14 '12 at 16:25