Question

我正在使用Jquery的Datepicker并在日历旁边有一组5个按钮来选择即将到来的1-5天。我已经让周末变灰了但是当我点击按钮时，他们仍然选择周末的日子。如何让它忽略周末，只计算工作日？（例如，如果我在星期五点击2天，则应选择星期二）

这是我的代码

$(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'”添加为日期选择器的参数，而周末关闭，它将自动选择接下来的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
});

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

Answer 2

我创建了一个演示，但我无法使用您的HTML，因为它似乎是一种我不熟悉的动态语言。所以我刚创建了一些HTML。基本上，此处的脚本将突出显示当前日期前的天数，具体取决于您按下的按钮

＆＃13;

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));
    }
  }
});

＆＃13;

.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;
}

＆＃13;

<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" />

＆＃13;

JQuery的DatePicker自动选择工作日

2 个答案: