jQuery Datepicker - How to disable first two days after today

Question

I am trying to make a jQuery datepicker where the first two days after today are disabled.

What I mean by this is for example, the current date today is the 12th (Monday). When a customer clicks on the calendar the 12th and 13th are both greyed out and unclickable and the first available day is the 14th (Wednesday)

I currently only have a basic calendar with weekends disabled and have not been able to find a way to do this method.

Any help would be appreciated.

Andrew Chan · Accepted Answer · 2018-02-12T20:24:25.260

3

You may want something along the lines of this jsfiddle

$(function() {
  var date = new Date();
  var minDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 2);
  $('#thedate').datepicker({
    dateFormat: 'dd-mm-yy',
    minDate: minDate,
    beforeShowDay: $.datepicker.noWeekends
  });

});

It gets the current date and creates a new one with the date 2 days ahead. Then it uses the minDate property of date picker and sets it to your new min date. You may have to do checks to see if the +2 is greater than the end of the month, but it shouldn't be a big hassle.

edited Feb 12 '18 at 20:24

answered Feb 12 '18 at 19:55

Andrew Chan

91
4

Instead of worrying about checks, do something similar to this: https://stackoverflow.com/questions/563406/add-days-to-javascript-date – Branco Feb 12 '18 at 20:04
Thanks for the help. In the snippet you provided how would I go about disabling weekends for the calendar? – Krasimir Zarkov Feb 12 '18 at 20:07
@KrasimirZarkov check this out http://www.jquerybyexample.net/2010/07/disable-weekends-in-jquery-ui.html, also I editted the jsfiddle – Andrew Chan Feb 12 '18 at 20:22
@Branco yes, that would probably be a better solution – Andrew Chan Feb 12 '18 at 20:24

user2314737 · Answer 2 · 2018-02-12T20:34:43.773

You can use the option beforeShowDay with a function that returns false for today's and tomorrow's date

$(function() {
  $("#datepicker").datepicker({
    beforeShowDay: function(date) {
      var today = new Date().getDate(),
        tomorrow = today + 1;
      // date is not today, tomorrow, or week-end
      if ((today == date.getDate() || tomorrow == date.getDate()) || date.getDay() % 6 == 0) {
        return [false, "CSSclass", "disabled"];
      } else {
        return [true, '', ''];
      }
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<p>Date: <input type="text" id="datepicker"></p>

jQuery Datepicker - How to disable first two days after today

2 Answers2