Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
224 views
in Technique[技术] by (71.8m points)

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...