Disable Weekends on HTML 5 input type date

Question

Is it possible to disable all weekends for HTML 5 input type date?

<input id="date1" size="60" type="date" format="MM/DD/YYYY" placeholder="MM/DD/YYYY" />

As I understand from the reference, I would say no. (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date) you can only set min/max dates. — Ali Ankarali, Apr 16 '18 at 18:00
@DanielAWhite: That doesn't really look like a duplicate (min/max dates versus weekends.) Especially because that question had the answer of "by the standards, yes, but practically, no, not yet." And this one is just a "no." — Scott Sauyet, Apr 16 '18 at 18:28
This is not ***exactly*** a dupe. The answers in the other post only address min/max dates, which doesn't answer the OP. I just wrote there an answer that address also the weekend dates, but it has (as of now) less that three votes. TL;DR no answer in the dupe target answer the OP with a sufficient amount of votes. I don't know what to make of it, I'll skip the reopen vote review :/ — Nino Filiu, Jun 06 '19 at 18:19

score 22 · Answer 1 · answered Jun 24 '19 at 14:08

22

Just check the day. If it's a weekend you can reset the value and tell the user to pick something else.

const picker = document.getElementById('date1');
picker.addEventListener('input', function(e){
  var day = new Date(this.value).getUTCDay();
  if([6,0].includes(day)){
    e.preventDefault();
    this.value = '';
    alert('Weekends not allowed');
  }
});

<input id="date1" size="60" type="date" format="MM/DD/YYYY" placeholder="MM/DD/YYYY" />

answered Jun 24 '19 at 14:08

I wrestled a bear once.

22,983
19
69
116

2

Note some browser like Chrome will set the date when you use the arrows or select another month. That screws this up if it happens to be on a weekend, because instead of going to the next month you just get the error and it resets. – James Anelay May 19 '21 at 11:23

Webdeveloper_Jelle · Accepted Answer · 2019-06-24T14:04:08.137

Just for HTML 5 input type date this isn't possible.
You can use flatpickr as an alternative: ( https://chmln.github.io/flatpickr/examples/#disabling-specific-dates )
It looks better and also can do what you are asking for!
In the documentation is mentioned a property named disable that you can use to remove weekends.

{
"disable": [
    function(date) {
        return (date.getDay() === 0 || date.getDay() === 6);
    }
],
"locale": {
    "firstDayOfWeek": 1 // start week on Monday
}

}

Full working example:

$("#date1").flatpickr({
    enableTime: true,
    dateFormat: "m-d-Y",
    "disable": [
        function(date) {
           return (date.getDay() === 0 || date.getDay() === 6);  // disable weekends
        }
    ],
    "locale": {
        "firstDayOfWeek": 1 // set start day of week to Monday
    }
});

<html>
  <head>
    <title>Using Flatpickr</title>
  <!--  Flatpicker Styles  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/themes/dark.css">
  </head>
  <body>
      <input id="date1"  placeholder="MM/DD/YYYY" data-input />
        <!-- jQuery -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <!--  Flatpickr  -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.js"></script>
  </body>
</html>

score 2 · Answer 3 · answered Dec 31 '21 at 13:18

some browser like Chrome will set the date when you use the arrows or select another month

To avoid this problem, I have found that the setCustomValidity method was more useful to my use case than resetting the value of the input.

https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#implementing_a_customized_error_message

Here is an example below. On form submission, if a week-end is selected, the form won't actually submit and the error will be displayed.

const picker = document.getElementById('date1');
picker.addEventListener('change', function(e){
  var day = new Date(this.value).getUTCDay();
  if([6,0].includes(day)){
    e.target.setCustomValidity('week-end not allowed')
  } else {
    e.target.setCustomValidity('')
  }
});

<input id="date1" size="60" type="date" format="MM/DD/YYYY" placeholder="MM/DD/YYYY" />

score 0 · Answer 4 · answered Jun 02 '23 at 07:01

I got an error using addEventListner, thus I tried it with Jquery

<script> 
jQuery(document).ready(function($) { 

$('#date_field').change(function() {
    var date = new Date($(this).val());
    const day = date.getDay();
    if(day==0)
    {
        alert("You can't select sunday");
        $(this).val("");
    } 
});
}); 
</script>

You can change days of week from day==0 till day=6 as per your need.

Disable Weekends on HTML 5 input type date

4 Answers4

Linked