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.

回答1:

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

回答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,
});

回答3:

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

来源：https://stackoverflow.com/questions/10584701/jquery-ui-datepicker-restricted-selection-working-days

标签

jquery

datepicker