Home > Software engineering >  How do I disable Mondays in Datepicker?
How do I disable Mondays in Datepicker?

Time:09-18


Would someone be able to help me out here on how to disable Mondays as well?
EXTRA: How do you prevent someone from manually entering their own delivery date (i.e. if the delivery calendar doesn't pop up immediately)?

Thank you very much in advance!

Please find my current code below: -

if (window.jQuery) {
  let $ = window.jQuery;

  $(function() {
    // Dates to exclude
    var excludeDays = ['2021-09-04', '2021-09-12'];

    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: ' 1M',
      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://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>

<div style="width:300px; clear:both;">
  <p>
    <input id="date" type="text" name="attributes[DELIVERY DATE]" value="" />
    <span style="display:block" class="instructions"></span>
  </p>
</div>

CodePudding user response:

Use day == 1 in your beforeShowDay function. Here I've disabled Sundays and Mondays.

if (window.jQuery) {
  let $ = window.jQuery;

  $(function() {
    // Dates to exclude
    var excludeDays = ['2021-09-04', '2021-09-12'];

    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: ' 1M',
      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 || day == 1) ? false : disableSpecificDate(date)), ''];
      }
    });
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>

<div style="width:300px; clear:both;">
  <p>
    <input id="date" type="text" name="attributes[DELIVERY DATE]" value="" />
    <span style="display:block" class="instructions"></span>
  </p>
</div>

  • Related