Show warning if selected date is unavailable-CodePudding

I have a date input:

<input id="datetime" type="date" step="1">
<p id="status"></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>

I want the message to show 'Invalid date' if the date selected exist in the RestrictedDate array. Right now I'm stuck at (< '14/10/2022')

var datetimeElement = document.getElementById("datetime");
var statusElement = document.getElementById("status");
var RestrictedDate = ["20/10/2022", "21/10/2022", "22/10/2022", "23/10/2022", "24/10/2022"];

// A simple function to check the validity of a date using the isValid() method
function checkValidity() 
{
 if (moment(datetimeElement.value.toString()).isValid()) 
 {
     // Datetime exist in RestrictedDate     
     if (moment(datetimeElement.value.toString()).format('DD/MM/YYYY') < '14/10/2022') //NEED HELP HERE
     {
     // Invalid date
     statusElement.innerHTML = 'Invalid date';
     } else {
     // Datetime is valid
     statusElement.innerHTML = 'Valid date';
     }
  } else {
// Datetime is invalid
statusElement.innerHTML = 'Please select date.';
}
}

// Check date validity every 1 seconds and update the text
setInterval(function() {
checkValidity();
}, 1000);

You can see the code Here

CodePudding user response：

You can use includes method of Array prototype.

function checkValidity() {
  if (moment(datetimeElement.value.toString()).isValid()) {
    const formatedDate = moment(datetimeElement.value.toString()).format('DD/MM/YYYY');
    if (RestrictedDate.includes(formatedDate)) {
      // Invalid date
      statusElement.innerHTML = 'Invalid date';
    } else {
      // Datetime is valid
      statusElement.innerHTML = 'Valid date';
    }
  } else {
    // Datetime is invalid
    statusElement.innerHTML = 'Please select date.';
  }
}

CodePudding user response：

Why are you storing the restricted dates as strings. Why not store the restricted dates as actual Date objects, then in your validation fn you can do something like:

const isRestricted = RestrictedDate.find(x => x.getTime() === new Date(dateTimeElement.value).getTime());

Also, if possible I would use something like date-fns alongside native date objects rather than Moment.js, which is slow, hard to debug, and is now a legacy project.

CodePudding user response：

You can just check if the date value is present in the array and that should do the trick without moment.js

var datetimeElement = document.getElementById("datetime");
var statusElement = document.getElementById("status");
var RestrictedDate = ["20/10/2022", "21/10/2022", "22/10/2022", "23/10/2022", "24/10/2022"];

function getFormattedDate(date) {
    // this function is pulled from this answer at https://stackoverflow.com/a/15764763/11307127
    let year = date.getFullYear();
    let month = (1   date.getMonth()).toString().padStart(2, '0');
    let day = date.getDate().toString().padStart(2, '0');
  
    return day   '/'   month   '/'   year;
}

datetimeElement.addEventListener('change', function() {
const date = getFormattedDate(new Date(this.value));
if(RestrictedDate.includes(date))
{
statusElement.innerText = "Invalid Date";
}
else
{
statusElement.innerText = "Valid Date";
}
})

<input id="datetime" type="date" step="1">
<p id="status">Please select a date</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>