Razor视图日期字段整选连续输入需求及解决方案问询

原生HTML5的date类型输入框由浏览器原生实现，多数浏览器默认限制为分段选择输入，无法直接连续输入完整日期字符串。以下是几种可行的解决方案：

方案1：文本输入框+自定义输入掩码 #

将输入框改为text类型，通过JavaScript实现日期输入掩码，支持连续输入数字并自动格式化，同时保留后端验证逻辑。

Razor视图代码 #

<label asp-for="DateOfBirth" class="control-label required" style="font-weight:bold;"></label>
<input asp-for="DateOfBirth" type="text" class="form-control input-lg date-mask" required />
<span asp-validation-for="DateOfBirth" class="text-danger"></span>

配套JavaScript #

// 为日期输入框添加掩码，支持连续输入MMDDYYYY并自动转为MM/DD/YYYY格式
document.querySelectorAll('.date-mask').forEach(input => {
    input.addEventListener('input', function() {
        // 过滤非数字字符
        let rawValue = this.value.replace(/[^0-9]/g, '');
        let formattedValue = '';

        // 按MM/DD/YYYY格式拼接
        if (rawValue.length >= 2) {
            formattedValue += rawValue.slice(0, 2) + '/';
            rawValue = rawValue.slice(2);
        }
        if (rawValue.length >= 2) {
            formattedValue += rawValue.slice(0, 2) + '/';
            rawValue = rawValue.slice(2);
        }
        formattedValue += rawValue.slice(0, 4);

        this.value = formattedValue;
    });

    // 聚焦时自动选中全部内容，方便用户直接输入
    input.addEventListener('focus', function() {
        setTimeout(() => this.select(), 10);
    });
});

Model增强验证 #

在EmployeeInfo的对应日期字段（注：你提供的Model中字段名为DateFormFilled，需自行与视图中DateOfBirth匹配）添加格式验证：

public partial class EmployeeInfo
{
    [DataType(DataType.Date)]
    [DisplayName("Date")]
    [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
    [RegularExpression(@"^\d{2}/\d{2}/\d{4}$", ErrorMessage = "请输入有效的日期格式（MM/DD/YYYY）")]
    public DateTime DateFormFilled { get; set; } = DateTime.Now;
}

方案2：使用第三方日期选择器（Flatpickr） #

Flatpickr是轻量无依赖的日期选择器，支持手动连续输入日期字符串，同时提供可视化选择界面。

Razor视图代码 #

<label asp-for="DateOfBirth" class="control-label required" style="font-weight:bold;"></label>
<input asp-for="DateOfBirth" type="text" class="form-control input-lg flatpickr-date" required />
<span asp-validation-for="DateOfBirth" class="text-danger"></span>

<script>
// 初始化Flatpickr
flatpickr('.flatpickr-date', {
    dateFormat: "Y-m-d", // 与后端DateTime绑定格式一致
    allowInput: true, // 允许手动输入日期
    onReady: function() {
        // 聚焦时选中全部内容
        this.inputElement.addEventListener('focus', () => {
            setTimeout(() => this.inputElement.select(), 10);
        });
    }
});
</script>

Model配置 #

确保Model字段的格式与Flatpickr输出匹配：

public partial class EmployeeInfo
{
    [DataType(DataType.Date)]
    [DisplayName("Date")]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
    public DateTime DateFormFilled { get; set; } = DateTime.Now;
}

方案3：增强原生Date输入框（有限兼容） #

部分浏览器（如Chrome）支持在选中全部内容后按YYYY-MM-DD格式连续输入数字，可通过JavaScript强制聚焦时选中全部内容优化体验：

Razor视图代码 #

<label asp-for="DateOfBirth" class="control-label required" style="font-weight:bold;"></label>
<input asp-for="DateOfBirth" type="date" class="form-control input-lg" required />
<span asp-validation-for="DateOfBirth" class="text-danger"></span>

<script>
// 聚焦日期输入框时自动选中全部内容
document.querySelector('input[type="date"]').addEventListener('focus', function() {
    setTimeout(() => this.select(), 10);
});
</script>

注意：此方案依赖浏览器支持，用户需严格按YYYY-MM-DD顺序输入数字，兼容性不如前两种方案。

内容的提问来源于stack exchange，提问作者rimi