Question

我是JavaScript的初学者，我知道这个主题存在于StackOverFlow上，如下所示，但我不理解。

例如，我想处理以前的日期：我们在28-05-2020上，如果用户在27-05-2020上输入错误消息，则会出现。

有关信息，我不得不使用JavaScript处理日期。

function validation()
{
    const date_start = document.getElementById('date_start').value;
    const inputDate = new Date(date_start);
    
    const dayFromImputDate = inputDate.getFullYear(); // previous day
    
    const now = new Date();
    const dateNow = now.getFullYear();

    if(dayFromImputDatee < dateNow) {
        document.getElementById('date_startError').innerHTML = " ** Error date ! ";
        return false;
    }

    if(date_start == ""){
        document.getElementById('date_startError').innerHTML = " ** date empty ! ";
        return false;
    }



    console.log("Date is valid");
    return true;
}

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
<form action="#" onsubmit="return validation()" >
<br>
<label>Date start : </label>
<br>
<input type="date" name="date_start" id="date_start">
<br>
<span id="date_startError"></span>
<br>
<input type="submit" value="ok">
</form>
</body>
</html>

非常感谢您的帮助和时间。

Answer 1

因为HTML5已经为PATH输入类型提供了min和max属性，所以您无需实现单独的验证功能即可完成此操作。这是一种更简单的方法：

date

基本上，您只是获得一个新的var date = new Date(); var iso_date = date.toISOString().substring(0, 10); document.getElementById("date_start").setAttribute('min', iso_date);对象，将其提取并格式化为ISO 8601日期格式，然后将其设置为Date()属性。这也将浏览器选择日历限制为仅将来的日期。

Answer 2

如果我正确理解问题，则您正在尝试将日期表单输入限制为当前日期或将来的某个日期。要检查日期是否有效，您可以执行以下操作：

    let earliestPossibleDate = new Date(
        now.getFullYear(), now.getMonth(), now.getDate()
    );
    let isValidDate = date_start >= earliestPossibleDate

Answer 3

三件事：

您需要获取当前日期，并设置开始一天的时间。
您需要获取选定日期并设置开始一天的时间
比较所选日期是大于还是等于当前日期。

请注意，比较日期时，还需要考虑时间。大多数日历工具都包含时间作为对所选日期的响应。您需要意识到这一点。

这不包括其他日期验证。这只会解决当前的问题。希望这可以帮助！ =）

const isValidDate = (selectedDate) => {
    const currentDate = new Date();

    // reset to start of day
    currentDate.setHours(0);
    currentDate.setMinutes(0);
    currentDate.setSeconds(0);
    currentDate.setMilliseconds(0);

    const newDate = new Date(selectedDate);
    newDate.setHours(0);
    newDate.setMinutes(0);
    newDate.setSeconds(0);
    newDate.setMilliseconds(0);

    return newDate.getTime() >= currentDate.getTime();
}

要使用，只需将选定的日期扔到函数中即可。如果日期大于或等于今天，则应返回true。

isValidDate(selectedDateFromDatePicker);

Answer 4

您可以使用<运算符检查输入日期是否小于今天的日期

const form = document.querySelector('form');
const error = document.getElementById('date_startError');

function validation(event) {
  event.preventDefault();

  const startDate = form.elements['date_start'].value;

  if (!startDate) {
    error.innerHTML = " ** date empty ! ";
    return;
  }

  const inputDate = new Date(startDate).getDate();
  const today = new Date().getDate();

  if (inputDate < today || !inputDate.valueOf()) {
    error.innerHTML = " ** Error date ! ";
    return;
  }

  error.innerHTML = "date is valid";
}

<form action="#" onsubmit="validation(event)">
  <br>
  <label>Date start : </label>
  <br>
  <input type="date" name="date_start" id="date_start" placeholder="2020-05-28">
  <br>
  <span id="date_startError"></span>
  <br>
  <input type="submit" value="ok">
</form>

将日期限制为今天并阻止以前的日期

4 个答案: