时间戳

首页 > 解决方案 > 如何在输入类型日期字段中仅重置年份？

javascript - 如何在输入类型日期字段中仅重置年份？

问题描述

在某些情况下，我只想重置日期输入库中的年份。

请参阅下面的示例，如果用户键入日期大于，我想重置年份2022-12-31。

当我尝试它重置整个日期但我只想重置年份而不是完整日期。

示例：如果用户类型01/01/2023，则应将其重置为01/01/yyyy.

$('#date-input').change(function(e) {
  let input = $(this);
  
  if (input.prop('max') < input.val()) {
    var value = input.val().substring(5, 10);
    console.log(value);
    input.val(value);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="date" id="date-input" placeholder="MM / DD / YY" max="2022-12-31"></span>

标签： javascripthtmlhtml5-input-date

解决方案

这是不可能的，我害怕。当您为输入设置日期时，它必须是有效的日期。

您可以做的最好的事情是将其设置为一个日期，然后显示一条消息以警告用户他们输入的日期晚于最大日期。您可以将其设置为当前年份，或者如果不希望人们错误地继续当前年份（例如，即使“0001”也可以），也可以将其设置为没有意义的年份，但您不能只将年份清除为yyyy.

在下面的示例中，如果日期在最大日期之后：

  • 获取输入的年份并显示一条消息说它是无效的
  • 用当前年份替换输入的年份
  • 将焦点重新放在输入上 - 无法将焦点专门设置在年份上，但在大多数情况下，当整个输入获得焦点时，它将选择年份作为最后输入的信息。

$('#date-input').change(function(e) {
  let input = $(this);
  
    $('.date-error').text("");

if (input.prop('max') < input.val()) {
    var inputyear = input.val().substring(0, 4);
    $('.date-error').text(inputyear+ " is not a valid year. Please enter a date before 31/12/2022");

    var value = input.val().substring(5, 10);
    CurrYear = new Date().getFullYear();
    value = CurrYear+"-"+value;
    input.val(value);

    input.focus();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="date" id="date-input" placeholder="MM / DD / YY" max="2022-12-31"></span>
<div class="date-error"></div>

推荐阅读