Disable weekends, all holidays and Mondays in pure JavaScript date picker

Question

In a Shopify project running Booster theme, we're not using jQuery at all. So I'm using a simple plug-in to add the date-picker in the cart page. With the below code, I've only been able to just get the date-picker working, but I'm not sure how to disable weekends, all holidays and Mondays?

<!DOCTYPE html>
<html lang="en">
<head>
<title>Date Picker</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dtsel.css" />
<script src="dtsel.js"></script>
</head>
<body>

  <input name="dateTimePicker" />

</body>
<script>
  instance = new dtsel.DTS('input[name="dateTimePicker"]');
  instance = new dtsel.DTS('input[name="dateTimePicker"]',  {
              showTime: true
            });
            instance = new dtsel.DTS('input[name="dateTimePicker"]',  {
              showTime: true,
              showDate: false
            });
            instance = new dtsel.DTS('input[name="dateTimePicker"]',  {
              dateFormat: "yyyy-mm-dd",
              timeFormat: "HH:MM:SS"
            });
            instance = new dtsel.DTS('input[name="dateTimePicker"]',  {
              direction: 'BOTTOM'
            });
            instance = new dtsel.DTS('input[name="dateTimePicker"]',  {
              defaultView: "MONTHS"
            });
            instance = new dtsel.DTS('input[name="dateTimePicker"]',  {
              paddingX: 5,
              paddingY: 5
            });
</script>
</html>

Links to the plug-in site and github repository are below. https://www.cssscript.com/date-time-picker-dtsel/ https://github.com/crossxcell99/dtsel

Could you please help get the JavaScript code above do exactly what the jQuery code below does?

<script>
  jQuery(document).ready( function() {
    jQuery(function() {
        var disabledDays = ["2021-12-23","2021-12-24","2021-12-30","2021-12-25", "2021-12-31", "2021-1-1"];
        var myDate = new Date();
        if (myDate.getDay() == 5) {
          // If today is Friday, disallow the Monday of the coming week (3 days later)
          myDate.setDate(myDate.getDate() + 3);
          disabledDays.push(jQuery.datepicker.formatDate('yy-m-d', myDate));
        }
        jQuery("#ship_date").datepicker({
          minDate: +2,
          maxDate: '+2M', 
          beforeShowDay: function(date) {
              var day = date.getDay();
              var string = jQuery.datepicker.formatDate('yy-m-d', date);
              var isDisabled = ($.inArray(string, disabledDays) != -1);

              //day != 0 and day != 6 disable weekends
              return [day != 0 && day != 6 && !isDisabled];              
          }
        });
    });
  });
</script>

A (very) quick look at dtsel.js source and there's no (obvious) mechanism in that datepicker to allow for disabled dates. To add disabled dates you have 2 choices 1) add the feature to the plugin dtsel.js 2) use a different datepicker, one that actually has an option for disabled dates. Trying to "hack" in disabled dates on a plugin in just asking for trouble. — freedomn-m, Mar 10 '22 at 09:03
Thanks for the observations. Is it possible for you to help add the feature or suggest a different plugin with the feature that works for all browsers? — CodeForGood, Mar 10 '22 at 10:15

score 1 · Accepted Answer · answered Mar 10 '22 at 11:35

You can have a look at VanillaJS DatePicker. It has all your required options and is completely written in JavaScript with no external dependencies. In the below code, you can see a minimal example of conditions that you stated in your question.

daysOfWeekDisabled - 0 and 6 disables Sunday and Saturday

datesDisabled - Dates to disable including next Monday if it is Friday today

minDate - Minimum Date that can be picked is +2days

maxDate - Maximum Date that can be picked is +60days

function addDays(date, days) {
  var result = new Date(date);
  result.setDate(result.getDate() + days);
  return result;
}

const DISABLED_DATES = ['03/11/2022'];
const today = new Date();

if(today.getDay() === 5){
 DISABLED_DATES.push(addDays(today, 3)); 
}

const elem = document.querySelector('#foo');
const datepicker = new Datepicker(elem, {
  pickLevel: 0,
  daysOfWeekDisabled: [0,6],
  datesDisabled: DISABLED_DATES,
  minDate: addDays(today, 2),
  maxDate: addDays(today, 60)
});

<link href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/css/datepicker.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/js/datepicker.min.js"></script>

<div id="foo"></div>

Add days code is from here.

I have intentionally added 60 days instead of 2 months. You will need to fix this to get accurate maxDate.

Thanks a lot Bilal, I would like you to confirm if this is supported in all browsers. — CodeForGood, Mar 10 '22 at 11:37
@PKTG from the [Github Readme](https://stackoverflow.com/a/2706169/2803788), Made for modern browsers — no support for IE and Edge Legacy (aka non-Chromium Edge) ** If you need to support Edge Legacy, Web Components polyfill will allow this library to run on it. — Bilal Akbar, Mar 10 '22 at 11:39
I need to support all browsers because the customer can use any browser. So please tell me what do you suggest I do? — CodeForGood, Mar 10 '22 at 11:45
Bilal, could you please have a look at the post on trouble reading active element? Link to it is here. https://stackoverflow.com/questions/73364211/hide-open-active-accordion-when-another-accordion-is-clicked — CodeForGood, Aug 16 '22 at 05:59

Disable weekends, all holidays and Mondays in pure JavaScript date picker

1 Answers1