JQuery 的 DatePicker auto select 工作日

Question

我正在使用 Jquery 的日期选择器，日历旁边有一组 5 个按钮，用于 select 未来 1-5 天。我已经将周末显示为灰色，但当我单击按钮时，它们仍然是 select 个周末。如何让它忽略周末而只计算工作日？（例如，如果我在星期五点击 2 天，它应该 select 星期二）

这是我的代码

$(function(){
  $('.rfq_ship_date').datepicker({
    beforeShowDay: $.datepicker.noWeekends
  });
});


$(".1day").click(function(){$(".rfq_ship_date").datepicker("setDate", "+1")});
$(".2day").click(function(){$(".rfq_ship_date").datepicker("setDate", "+2")});
$(".3day").click(function(){$(".rfq_ship_date").datepicker("setDate", "+3")});
$(".4day").click(function(){$(".rfq_ship_date").datepicker("setDate", "+4")});
$(".5day").click(function(){$(".rfq_ship_date").datepicker("setDate", "+5")});

编辑：这是相关的 HTML

  <div class="field">
    <%= f.label :ship_date %><br>
    <%= f.text_field :ship_date, class:"rfq_ship_date"%>
    <%= button_tag "1", class: "1day", type:"button" %>
    <%= button_tag "2", class: "2day", type:"button" %>
    <%= button_tag "3", class: "3day", type:"button" %>
    <%= button_tag "4", class: "4day", type:"button" %>
    <%= button_tag "5", class: "5day", type:"button" %>
  </div>

感谢任何帮助

Answer 1

我想这已经在这里得到了回答： Allow only the next 5 business days jquery datepicker

长话短说，如果您将 "maxDate: '+1w'" 作为参数添加到日期选择器，当周末关闭时，它会自动 select 接下来的 5 天而不是 7 天，因为它会只计算工作日。

$('yourSelector').datepicker({
    minDate: 0, // your min date
    maxDate: '+1w', // one week will always be 5 business day - not sure if you are including current day
    beforeShowDay: $.datepicker.noWeekends // disable weekends
});

您还可以进行手动检查，看看您 select 参加的那一天是周末还是假期。与 isWeekend 和 isHoliday。代码已在此处显示： Add days after date is selected excluding weekends and holidays

Answer 2

我创建了一个演示，但我无法使用您的 HTML，因为它似乎是一种我不熟悉的动态语言。所以我刚刚创建了一些 HTML。基本上，这里的脚本会根据您按下的按钮突出显示从当前日期向前的天数

var dates = [];

$(function() {

  $('.rfq_ship_date').datepicker({
    numberOfMonths: [1, 1],
    beforeShowDay: highlightDays
  }).click(function() {
    $('.ui-datepicker-today a', $(this).next()).removeClass('ui-state-highlight ui-state-hover');
  });

  $('.1day').click(function() {
    createDateArray(1);
  });
  $('.2day').click(function() {
    createDateArray(2);
  });
  $('.3day').click(function() {
    createDateArray(3);
  });
  $('.4day').click(function() {
    createDateArray(4);
  });
  $('.5day').click(function() {
    createDateArray(5);
  });

  function highlightDays(date) {
    var noWeekend = $.datepicker.noWeekends(date);
    if (noWeekend[0]) {
      for (var i = 0; i < dates.length; i++) {
        if (dates[i].getTime() === date.getTime()) {
          return [true, 'highlight'];
        }
      }
      return [true, ''];
    } else {
      return noWeekend;
    }
  }

  function createDateArray(days) {
    dates = [];
    var today = new Date();
    today.setHours(0, 0, 0, 0);
    $(".rfq_ship_date").datepicker('setDate', today);
    var nextDay = today;
    dates.push(new Date(nextDay));

    for (var i = 1; i < days; i++) {
      nextDay.setDate(nextDay.getDate() + 1);

      if (nextDay.getDay() === 0) {
        nextDay.setDate(nextDay.getDate() + 1);
      } else if (nextDay.getDay() === 6) {
        nextDay.setDate(nextDay.getDate() + 2);
      }

      dates.push(new Date(nextDay));
    }
  }
});

.highlight > a.ui-state-default {
  background: url("images/ui-bg_highlight-soft_25_ffef8f_1x100.png") repeat-x scroll 50% top #FFEF8F !important;
  border: 1px solid #F9DD34;
  color: #363636;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.css" rel="stylesheet" />


<input type="text" class="rfq_ship_date" />
<input type="button" class="1day" value="1 day" />
<input type="button" class="2day" value="2 day" />
<input type="button" class="3day" value="3 day" />
<input type="button" class="4day" value="4 day" />
<input type="button" class="5day" value="5 day" />

JQuery 的 DatePicker auto select 工作日

JQuery's DatePicker auto select weekday

javascript

jquery

jquery-ui

jquery-ui-datepicker