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>

或者，您可以仅在this.update方法中使用JavaScript添加支票，以检查年份是否少于四位数。

Answer 2

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

尝试使用[0-9] {4}模式，并将最大值设置为9999

将年份值限制为仅4位数字长

2 个答案: