JQuery's DatePicker auto select weekday

Question

I'm using Jquery's Datepicker and have a set of 5 buttons next to the calendar to select the coming 1-5 days. I already have the weekends grayed out but when I click the buttons, they still select weekends days. How do I make it ignore weekends and only count business days? (e.g. if I click 2 days on a Friday it should select Tuesday)

Here is my code

$(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")});

EDIT: Here is the related 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>

Any help is appreciated

Answer 1

I think this has already been answered here: Allow only the next 5 business days jquery datepicker

Long story short, if you add "maxDate: '+1w'" as a paramter to the datepicker, while weekends is turned off, it'll automatically select the next 5 days rather than 7 days because it will only count business days.

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

You can also do a manual check to see if the day you are selecting will be a weekend or holiday. with isWeekend and isHoliday. The code has been shown here: Add days after date is selected excluding weekends and holidays

Answer 2

I created a demo but I couldn't use your HTML since it seems to be in a dynamic language I am unfamiliar with. So I just created some HTML. Basically, the script here will highlight the number of days forward from the current date depending on the button you press

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