Html - How to make a date input match a certain day of the week?

Paul
December 11, 2024
212 views
0 votes
2 Answers

I have an HTML script with date inputs for each day of the week (Sunday-Saturday). I’d like to validate the inputs so that the user can only select dates which match that day of the week. For example, December 1, 2024 was a Sunday, so the user can only input December 1, 8, 15, 22, etc into that box. They cannot input December 2 or 3.

<table>
 <tbody>
 <tr>
  <td><label for="date">Sunday:</label></td>
  <td><label for="date">Monday:</label></td>
  <td><label for="date">Tuesday:</label></td>
  <td><label for="date">Wednesday:</label></td>
  <td><label for="date">Thursday:</label></td>
  <td><label for="date">Friday:</label></td>
  <td><label for="date">Saturday:</label></td>
 </tr>
  <tr>
  <td><input name="date" type="text" style="width:130px" onfocus="(this.type='date')" onblur="if(!this.value){this.type='text';this.style.width='130px'}"></td>
  <td><input name="date" type="text" style="width:130px" onfocus="(this.type='date')" onblur="if(!this.value){this.type='text';this.style.width='130px'}"></td>
  <td><input name="date" type="text" style="width:130px" onfocus="(this.type='date')" onblur="if(!this.value){this.type='text';this.style.width='130px'}"></td>
  <td><input name="date" type="text" style="width:130px" onfocus="(this.type='date')" onblur="if(!this.value){this.type='text';this.style.width='130px'}"></td>
  <td><input name="date" type="text" style="width:130px" onfocus="(this.type='date')" onblur="if(!this.value){this.type='text';this.style.width='130px'}"></td>
  <td><input name="date" type="text" style="width:130px" onfocus="(this.type='date')" onblur="if(!this.value){this.type='text';this.style.width='130px'}"></td>
  <td><input name="date" type="text" style="width:130px" onfocus="(this.type='date')" onblur="if(!this.value){this.type='text';this.style.width='130px'}"></td>
 </tr>
 <tr>
<table>

This script where getDay() returns the day of the week (from 0 to 6) of a date.

<p id="date1"></p>

const weekday = new Date("December 01, 2024 01:15:00");
let day = weekday.getDay()

document.getElementById("date1").innerHTML = day;

The script below returns an alert every time a date selected (including Sundays). And if I add else it does not return an alert at all (including Mondays-Saturdays). However I may be inserting the else incorrectly.

function validateDate(date) {
    const selectedDate = new Date(date);
    const day = selectedDate.getDay();
    if (day !== 0) {
        alert("Please select a date that falls on a Sunday.");}
}

Thank you in advance

Answers

Click validate all to check wrong inputs.

function validateDate() {
let el=document.querySelectorAll(".dateInputCLS");
for(let a=0;a<el.length;a++){
    let dateOBJ = new Date(el[a].value);
    let day = dateOBJ.getDay();
    if (day !== a){el[a].style.border="2px solid red";}
    else{el[a].style.border="2px solid black";}
}
}

.dateInputCLS{border:2px solid black;}

<table>
 <tbody>
 <tr>
  <td><label for="date">Sunday:</label></td>
  <td><label for="date">Monday:</label></td>
  <td><label for="date">Tuesday:</label></td>
  <td><label for="date">Wednesday:</label></td>
  <td><label for="date">Thursday:</label></td>
  <td><label for="date">Friday:</label></td>
  <td><label for="date">Saturday:</label></td>
 </tr>
  <tr>
  <td><input class="dateInputCLS" name="date" type="text" style="width:130px" onfocus="(this.type='date')" onblur="if(!this.value){this.type='text';this.style.width='130px'}"></td>
  <td><input class="dateInputCLS" name="date" type="text" style="width:130px" onfocus="(this.type='date')" onblur="if(!this.value){this.type='text';this.style.width='130px'}"></td>
  <td><input class="dateInputCLS" name="date" type="text" style="width:130px" onfocus="(this.type='date')" onblur="if(!this.value){this.type='text';this.style.width='130px'}"></td>
  <td><input class="dateInputCLS" name="date" type="text" style="width:130px" onfocus="(this.type='date')" onblur="if(!this.value){this.type='text';this.style.width='130px'}"></td>
  <td><input class="dateInputCLS" name="date" type="text" style="width:130px" onfocus="(this.type='date')" onblur="if(!this.value){this.type='text';this.style.width='130px'}"></td>
  <td><input class="dateInputCLS" name="date" type="text" style="width:130px" onfocus="(this.type='date')" onblur="if(!this.value){this.type='text';this.style.width='130px'}"></td>
  <td><input class="dateInputCLS" name="date" type="text" style="width:130px" onfocus="(this.type='date')" onblur="if(!this.value){this.type='text';this.style.width='130px'}"></td>
 </tr>
 <tr>
<table>

<button onclick="validateDate();">Validate All</button>

Use the date step attribute

The question raises an interesting feature of date inputs that is worth knowing.

Most browsers support the step attribute on date inputs. And this can be used with the min attribute to limit user input to specific weekdays. By using reportValidity and the pseudo class :invalid, one can create a validating weekday input with minimal code.

(Firefox)

Adding min and step values disables other weekdays.

(Chrome)

Snippet

Much of the snippet is to support OP’s cumbersome custom control. Yet, only a minimal amount of this is needed to do a plain weekday date input.

const table = document.querySelector('table.schedule');
const dates = table.querySelectorAll('input[type=date]');

// initialize each date input

const d = new Date();
d.setDate(d.getDate() - d.getDay());

dates.forEach((date, i) => {
  date.value = date.min = d.toISOString().split('T').shift();
  d.setDate(d.getDate() + 1);
})

// show the active date input

table.addEventListener('focusin', (e) => {
  dates.forEach(date => date.classList.toggle('active', date === e.target))
})

// display message if user selects invalid day of week

table.addEventListener('change', (e) => {
  e.target.reportValidity();
})

table.schedule {
  font-family: sans-serif;
  border-collapse: collapse;
  & th {
    border: thin solid white;
    background: steelblue;
    color: white;
    padding: 0.5rem;
  }
  & td {
    border: thin solid lightgray;
    padding: 0.5rem;
  }
  & label {
    display: block;
    width: 100%;
  }
  & label:hover {
    text-decoration: underline;
  }
  & input[type=date] {
    border: none;
    outline: none;
    opacity: 0;
    width: 0px;
    transition: all 0.5s;
  }
  & input[type=date]:focus,
  input[type=date].active {
    opacity: 1;
    width: auto;
  }
  
  & input[type=date]:invalid {
    background: yellow;
  }
}

<p>Click on a weekday to enter a date</p>

<table class="schedule">
  <thead>
    <tr>
      <th><label for="sun">Sunday</label></th>
      <th><label for="mon">Monday</label></th>
      <th><label for="tue">Tuesday</label></th>
      <th><label for="wed">Wednesday</label></th>
      <th><label for="thu">Thursday</label></th>
      <th><label for="fri">Friday</label></th>
      <th><label for="sat">Saturday</label></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input id="sun" name="date" type="date" step="7"></td>
      <td><input id="mon" name="date" type="date" step="7"></td>
      <td><input id="tue" name="date" type="date" step="7"></td>
      <td><input id="wed" name="date" type="date" step="7"></td>
      <td><input id="thu" name="date" type="date" step="7"></td>
      <td><input id="fri" name="date" type="date" step="7"></td>
      <td><input id="sat" name="date" type="date" step="7"></td>
    </tr>
  </tbody>
</table>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to make a date input match a certain day of the week?

Answers