Show warning if selected date is unavailable

Question

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

All that's posted so far is JavaScript code. Is this actually a C# question? Are you planning on _using_ C# to solve this problem or does your application just so happen to _have_ C# in it? — gunr2171, Oct 13 '22 at 15:15

score 1 · Answer 1 · answered Oct 13 '22 at 15:24

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.';
  }
}

BorisAtLast · Answer 2 · 2022-10-13T15:27:02.490

1

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.

edited Oct 13 '22 at 15:27

answered Oct 13 '22 at 15:26

BorisAtLast

21
5

1

Beware about getTime() giving time in milliseconds. You will have problems because of locals: dateTimeElement gives an ISO8601 date "2022-10-13". And new Date("2022-10-13") will give you a timestamp in milliseconds that depends on the locale time offset. So you cannot store Date elements to compare with. E.g. you store 13/10/2022 00:00 != 13/10/2022 02:00 (locale date from a french visitor). Finally, "storing" js Date elements is not easy, since they are not serializable through JSON (you would convert them back and forth from strings). So, using strings is, finally, a proper way to do that. – Pierre Oct 13 '22 at 15:49
1

As a general advice, you would probably extract the new Date(...)... invariant part of the code and store it in a const, to avoid instantiating that on each predicate function execution. – Pierre Oct 13 '22 at 15:50

otejiri · Accepted Answer · 2022-10-13T15:38:43.953

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>

Show warning if selected date is unavailable

3 Answers3