【问题标题】:Jquery UI datepicker restricted selection [Working days]Jquery UI datepicker 限制选择 [工作日]
【发布时间】:2012-05-14 13:53:12
【问题描述】:

已解决:http://jsfiddle.net/YV34P/5/

我正在尝试设置 datepicker 以将选择范围限制为 5 天。

这没问题,可以工作,但是这天必须是“工作日”,没有周日和周六,这意味着如果我选择 5 月 18 日星期五,我的限制将是 5 月 24 日星期四。

有什么想法吗?我有以下代码:

$('.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
            };
        }
}

还有这个 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:非常感谢您提供的帮助,但问题是识别周末。现在,我有这个工作,但如果用户选择“星期五”,我的目标是将他的选择限制在星期四,但现在,使用此代码,它仅限于“星期四”,因为周末包括在“5 天”中" 从选定的开始日期开始。

【问题讨论】:

    标签: jquery datepicker


    【解决方案1】:

    您可以使用以下代码禁用周末:

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

    编辑:要禁用指定日期,请查看: Can the jQuery UI Datepicker be made to disable Saturdays and Sundays (and holidays)?

    【讨论】:

    • 谢谢,我正在实施这个。主要问题是如何识别星期日和星期六并计算 5 个“工作日”而不计算两个(周末)
    • 查看我的最新编辑,您可能会在那里找到有趣的信息。
    • 是的,我正在尝试这样做,但它一团糟,没有任何效果。非常错误,所有的日历。我会把它上传到 fiddle 以便你看一下
    • 这里是小提琴:jsfiddle.net/YV34P。看一看,然后选择 Fecha Hasta:5 月 18 日星期五,看看会发生什么
    【解决方案2】:

    您想要的是从今天到未来六天的任何时间。因此,您需要设置选项 maxDate。

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

    【讨论】:

      【解决方案3】:

      使用 beforeShowDay 事件来限制日期的选择。如果此函数返回 false,则该日期将无效

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

      更多详情见http://jqueryui.com/demos/datepicker/#event-beforeShowDayjQuery ui datepicker, get Day of week from onSelect

      【讨论】:

      • 非常感谢,但问题是识别周末。现在,我有这个工作,但如果用户选择“星期五”,我的目标是将他的选择限制在星期四,但现在,使用此代码,它仅限于“星期四”,因为周末包括在“5 天”中" 从选定的开始日期开始。
      • 这很简单。你可以这样做(在你的函数中)你也可以得到星期几dayOfWeek = minDate.getUTCDay(); if(dayOfWeek!=1) { days_to_add=7; } else { days_to_add=5; }
      • 在 maxDate 参数之后,您可以像 maxDate:"+"+days_to_add+"D" 一样传递它,这意味着 maxDate:"+5D"maxDate:"+7D"
      • 谢谢,我认为这种方法是最好的,我会努力让它发挥作用,谢谢。我会再次评论结果...
      • 不工作。有bug,不知道为什么,有时候让我选一两天,有时候让我什么都不选……
      猜你喜欢
      • 2011-01-13
      • 1970-01-01
      • 2010-11-29
      • 1970-01-01
      • 2015-01-28
      • 1970-01-01
      • 2013-10-29
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多