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

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>

CodePudding user response：

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/[email protected]/dist/css/datepicker.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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.