Razor Page中Bootstrap4 Gijgo日期选择器与Chrome默认控件冲突问题

这个问题我之前也碰到过！核心原因是：当你用asp-for绑定DateTime类型的属性时，ASP.NET Core会自动把<input>的type属性设置为date。Chrome浏览器会优先渲染这个type="date"的原生日期选择器，直接覆盖了Gijgo的自定义控件，而Firefox对原生date控件的处理逻辑不同，所以没出现这个问题。

给你两个关键的解决步骤：

1. 强制指定input的type为text #

手动给input加上type="text"，阻止Chrome渲染原生日期选择器：

<div id="myDatePicker" class="form-group" style="display: none;">
    <label asp-for="Test.Date" class="control-label">Date</label>
    <!-- 新增type="text" -->
    <input asp-for="Test.Date" id="datepicker" type="text" width="276"/>
    <span asp-validation-for="Test.Date" class="text-danger"></span>
</div>

这样浏览器就会把它当成普通文本框，Gijgo的脚本就能正常接管渲染自定义选择器了。

2. 统一前后端的日期格式 #

注意到你后端实体用的是DataFormatString = "{0:MM/dd/yyyy}"，但前端Gijgo设置的是format: 'dd/mm/yyyy'，这里格式不匹配可能会导致表单提交时日期解析错误。建议把两者统一：

$('#datepicker').datepicker({
    uiLibrary: 'bootstrap4',
    format: 'MM/dd/yyyy', // 和后端DisplayFormat保持一致
    minDate: Date.now(),
    maxDate: function() {
        var date = new Date();
        date.setDate(date.getDate()+5);
        return new Date(date.getFullYear(), date.getMonth(), date.getDate());
    }
});

这样用户选择的日期格式和后端期望的一致，提交时就不会出现验证错误或者绑定失败的情况。

做完这两步，Chrome里的Gijgo日期选择器应该就能正常工作了，和Firefox的表现一致。

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