Показать предупреждение, если выбранная дата недоступна
У меня есть ввод даты:
<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>
Я хочу, чтобы в сообщении отображалось «Недопустимая дата», если выбранная дата существует в массиве RestrictedDate. Прямо сейчас я застрял на (< '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);
Код можно посмотреть Здесь
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете использовать includes метод Array прототипа.
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.';
}
}
Почему вы храните ограниченные даты в виде строк. Почему бы не хранить ограниченные даты как фактические объекты Date, тогда в вашей проверке fn вы можете сделать что-то вроде:
const isRestricted = RestrictedDate.find(x => x.getTime() === new Date(dateTimeElement.value).getTime());
Кроме того, если возможно, я бы использовал что-то вроде date-fns вместе с собственными объектами даты, а не Moment.js, который медленный, сложный в отладке и теперь является устаревшим проектом.
Остерегайтесь getTime(), указывающего время в миллисекундах. У вас будут проблемы из-за местных жителей: dateTimeElement дает дату ISO8601 «2022-10-13». И новая дата ("2022-10-13") даст вам метку времени в миллисекундах, которая зависит от смещения времени локали. Таким образом, вы не можете хранить элементы Date для сравнения. Например. вы храните 10.13.2022 00:00 != 10.13.2022 02:00 (локальная дата от французского посетителя). Наконец, «хранить» элементы даты js непросто, поскольку они не сериализуются через JSON (вы бы преобразовывали их туда и обратно из строк). Итак, использование строк — это, наконец, правильный способ сделать это.
В качестве общего совета вы, вероятно, извлекли бы новую инвариантную часть Date(...)... из кода и сохранили бы ее в константе, чтобы избежать ее создания при каждом выполнении функции предиката.
Вы можете просто проверить, присутствует ли значение даты в массиве, и это должно помочь без 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>
Все, что опубликовано до сих пор, — это код JavaScript. Это на самом деле вопрос С#? Планируете ли вы использовать C# для решения этой проблемы, или ваше приложение просто использует C#?