html - 将年份值限制为只有 4 位数字

Question

我试图在日期字段中输入年份时将用户输入限制为 4 位数字。目前由于某种原因它上升到 6。这是我限制它的尝试，但不幸失败了。有谁知道这是为什么吗？

<input
    name="endDate"
    placeholder="End date"
    maxlength="4"
    pattern="[1-9][0-9]{3}"
    value={ this.props.values.endDate }
    min={ this.props.values.startDate }
    onChange={ this.update }
    type="date">
</input>

Answer 1

最简单的方法是将 max 属性设置为四位数年份的最后日期:9999 年 12 月 31 日。

例子:

<input
    name="endDate"
    placeholder="End date"
    maxlength="4"
    pattern="[1-9][0-9]{3}"
    value={ this.props.values.endDate }
    min={ this.props.values.startDate }
    max={ "9999-12-31" }
    onChange={ this.update }
    type="date">
</input>

或者，您可以使用 JavaScript 在 this.update 方法中添加一个检查，检查年份包含的数字是否少于四位。