Dynamic date blockouts jquery datepicker

Question

I have a custom appointment form with multiple locations. On Sundays all locations are closed. On Saturdays only a few locations are open. One location is so busy that all appointments need to be 1 week in advance at the very least.

I was finding answers saying, "You cannot update the current picker. You need to destroy it, set the reserved dates in an array, and rebuild the datepicker with those options.", which meant duplicating the datepicker that's on the custom form with all it's odd regional formats and options.

Then, after telling everyone it's going to be more work than it's worth I found out you can just out the next 7 days dynamically with:

$('input.datepicker').datepicker( 'option', 'minDate', '+7d');

That works! Then also found you could tell the current datepicker to switch to today's date with this:

$('input.datepicker').datepicker('setDate', 'today');

So can I get a live datepicker to hide weekends? I should be able to but the option I found fails:

$('input.datepicker').datepicker({ beforeShowDay: jQuery.datepicker.noWeekends });

I really want to be able to say, "no weekends" or "no sundays", without destroying and rebuilding, but it's not a popular topic since most forms don't need to update the datepicker dynamically.

Here's a simple fiddle of what I'd like to accomplish: https://jsfiddle.net/56qsau34/

EDIT: So I was really close but I had the wrong method(?) for applying an update to the live datepicker. If you take the last guess and write it properly it works!

$('input.datepicker').datepicker( 'option', 'beforeShowDay', jQuery.datepicker.noWeekends );

EDIT #2: Just for the poor soul that finds this without the final solution. When you realize that you need to 'toggle' the noWeekends feature this function that returns all the dates with 'true' will come in real handy:

$('input.datepicker').datepicker('option', 'beforeShowDay', function(d) {       
    var year = d.getFullYear(),
        month = ("0" + (d.getMonth() + 1)).slice(-2),
        day = ("0" + (d.getDate())).slice(-2);

    var formatted = year + '-' + month + '-' + day;

    //is it a sunday - this was the missing bit for all my specs
    if (d.getUTCDay() != 0) {
      return [true, "",""]; 
    }else{
      return [false, "",""];
    }
}

It's the jquery-ui datepicker https://api.jqueryui.com/datepicker/#option-beforeShowDay — JohnC, Oct 22 '18 at 20:42
I've updated with an example to avoid extra questions. And in the example you can see I tried the answer on the bootstrap doc page. Hope that helps? — AWDNUT, Oct 22 '18 at 21:05

score 0 · Answer 1 · answered Oct 22 '18 at 21:12

Does this help? Can the jQuery UI Datepicker be made to disable Saturdays and Sundays (and holidays)?

weekends visible but not selectable.

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!--
    want to hide weekends from calendar

    https://stackoverflow.com/questions/501943/can-the-jquery-ui-datepicker-be-made-to-disable-saturdays-and-sundays-and-holid


-->


  <title>jQuery UI Datepicker - Disable the Selection of some days  </title> 


    <link href="jquery-ui-1.10.3.css" rel="stylesheet">

              <script
              src="https://code.jquery.com/jquery-2.2.0.min.js"
              integrity="sha256-ihAoc6M/JPfrIiIeayPE9xjin4UWjsx2mjW/rtmxLM4="
              crossorigin="anonymous"></script>


              <script
              src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"
              integrity="sha256-lnH4vnCtlKU2LmD0ZW1dU7ohTTKrcKP50WA9fa350cE="
              crossorigin="anonymous"></script>


    <script type="text/javascript">


        $(function () {
            $(".datepicker1").datepicker({
                beforeShowDay: $.datepicker.noWeekends
            });
        });
    </script>

</head>
<body>
    <h3>Click in the TextBox to select a date :</h3>
    <p>weekends are not selectable</p>
    <input type="text" class="datepicker1" />

</body>
</html>

msg · Accepted Answer · 2018-10-22T22:08:28.637

0

Yes, you can change the options without destroying the widget.

$.datepicker.noSundays = function (date) {
   return [ date.getDay() != 0, "" ];
}

$("#foo").click(function() {
  $("input").datepicker();
});

$("#nowknd").click(function() {
  $("#datepicker").datepicker('option', 'beforeShowDay', $.datepicker.noWeekends);
});

$("#okwknd").click(function() {
  $("#datepicker").datepicker('option', 'beforeShowDay', '');
});

$("#nosuns").click(function() {
  $("#datepicker").datepicker('option', 'beforeShowDay', $.datepicker.noSundays);
});

$("#weekblock").click(function() {
  $("#datepicker").datepicker('option', 'minDate', '+7d');
});

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<p>Date:<input type="text" id="datepicker"></p>
<p>
  <button id="foo">Make it a datepicker</button>
  <button id="nowknd">Block weekends</button>
  <button id="okwknd">Allow weekends</button>
  <button id="nosuns">Block Sundays</button>
  <button id="weekblock">Block off a week</button>
</p>

edited Oct 22 '18 at 22:08

answered Oct 22 '18 at 21:16

msg

7,863
3
14
33

Sorry about the first reply. JS Fiddle isn't my usual hangout so I didn't test your solution correctly. After properly updating the fiddle it did work. Thanks! – AWDNUT Oct 22 '18 at 21:46
@AWDNUT no problem, I also missed the giveaway `jQuery.datepicker.noWeekends` in your original post that would have told me what picker it was. – msg Oct 22 '18 at 21:51
I'm still stuck and should have made the example better. If the user picks a location that isn't open on the weekends, the datepicker can remove the weekends from the calendar. Now when they change their mind and pick a location that is open on Saturday, what would the command be to make Saturdays available in the datepicker? FUDGE! – AWDNUT Oct 22 '18 at 21:56
The docs show passing an array with each date to tell it what to do with each so I just stole the example and made them all pass 'true' as the first parameter. Yay! – AWDNUT Oct 22 '18 at 22:16

Dynamic date blockouts jquery datepicker

2 Answers2