JQUERY DATEPICKER - exclude Sundays, specific dates AND disable next day selection after 12pm

Question

I'm hoping someone here can help me with the following: -

Currently, I have the following script for my datepicker snippet where I have excluded Sundays.

  <script>
window.onload = function() {
  if (window.jQuery) {
    let $ = window.jQuery;

    $(function() {
      $("#date").datepicker({
        dateFormat: 'dd/mm/yy',
        minDate: +1, 
        maxDate: '+2M',
        beforeShowDay: function(date) {
    var day = date.getDay();
    return [(day != 0), ''];
        }
      });
    });
  }
}

I would like to add the following conditions: -

Exclude multiple specific dates (i.e. 16/04/21, etc.)
Disable next business day selection by customers AFTER 12pm.

For point #2, I have the following code but am unsure of where to include it in the above: -

$("#date" ).datepicker({  
minDate: +1,
beforeShow : function(){
    var dateTime = new Date();
    var hour = dateTime.getHours();
    if(hour  >= 12){
        $(this).datepicker( "option", "minDate", "+2" );
     }
 }

Please let me know, thank you!

JqueryUI is not well maintained and there are much better date picker libraries these days. I would suggest looking for a better library unless you have to use JQueryUI for legacy reasons. — patrick3853, Apr 05 '21 at 07:01
look at this post https://stackoverflow.com/questions/677976/jquery-ui-datepicker-disable-specific-days Maybe that helps you. — Bernhard Beatus, Apr 05 '21 at 07:04

score 0 · Answer 1 · answered Apr 05 '21 at 16:43

You could always use the tried and true MomentJS which has plenty of development history, including nice modules to deal with localization, internationalization, business days, holidays and the other aspects of temporal qualifications.

Note that you cannot do naive things like adding 2 to something in a loop. You have to remember to deal with things like time zones, and the possibility your customer is somewhere where the time to them is valid, but to Shopify code running on their servers, maybe differs.

Any results you get from MomentJS can then be used to feed some widget that displays a calendar and offers the options to black out certain dates.

score 0 · Accepted Answer · answered Apr 05 '21 at 17:32

Please refer below code snippet:

$(function () {
    // Dates to exclude
    var excludeDays = ['2021-04-15', '2021-04-16', '2021-04-30'];
    function disableSpecificDate(date) {
        // To disable specific day
        var dateArr = [String(date.getFullYear()), String(date.getMonth() + 1), String(date.getDate())];
        if (dateArr[1].length == 1) dateArr[1] = "0" + dateArr[1];
        if (dateArr[2].length == 1) dateArr[2] = "0" + dateArr[2];
        return excludeDays.indexOf(dateArr.join("-")) == -1;
    }
    $("#date").datepicker({
        dateFormat: 'dd/mm/yy',
        minDate: +1,
        maxDate: '+2M',
        beforeShow: function () {
            // To exclude next business day after 12 PM
            if (new Date().getHours() >= 12) {
                $(this).datepicker("option", "minDate", +2);
            }
        },
        beforeShowDay: function (date) {
            var day = date.getDay();
            return [(day == 0 ? false : disableSpecificDate(date)), ''];
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" />
<input id="date"/>

JQUERY DATEPICKER - exclude Sundays, specific dates AND disable next day selection after 12pm

2 Answers2