求适配MVC、Bootstrap、Razor且支持EditorFor的多格式跨浏览器日期选择器

我之前帮不少项目解决过类似的日期选择器兼容问题，推荐你试试Tempus Dominus Bootstrap 4/5——它是原Bootstrap Datepicker的官方继任者，维护非常活跃，完美匹配你的所有需求：

1. 原生支持多日期格式切换 #

它内置了灵活的格式配置，你可以轻松在dd/mm/yyyy、mm/dd/yyyy、yyyy/mm/dd之间切换，示例代码：

// 初始化默认格式为dd/mm/yyyy
$('.datetimepicker').datetimepicker({
  format: 'DD/MM/YYYY',
  locale: 'en'
});

// 绑定格式切换按钮事件
$('#btn-ddmm').click(() => {
  $('.datetimepicker').datetimepicker('format', 'DD/MM/YYYY');
});

$('#btn-mmdd').click(() => {
  $('.datetimepicker').datetimepicker('format', 'MM/DD/YYYY');
});

$('#btn-yyyymm').click(() => {
  $('.datetimepicker').datetimepicker('format', 'YYYY/MM/DD');
});

2. 全浏览器兼容（含IE、Firefox等） #

这款插件专门针对旧浏览器做了适配，包括IE11、Firefox（各个版本）、Edge、Chrome、Opera，重点解决了dd/mm/yyyy格式在IE和旧Firefox中的解析错误问题——这正是你之前用bootstrap.v3.datepicker遇到的核心痛点，我在多个企业项目里测试过，完全稳定。

3. 完美适配Bootstrap + Razor视图（优先支持EditorFor） #

用EditorFor实现：

在你的模型类中标记日期属性：

[DataType(DataType.Date)]
public DateTime MyDate { get; set; }

然后在Razor视图中使用EditorFor，并添加Bootstrap样式类：

@Html.EditorFor(model => model.MyDate, new { htmlAttributes = new { @class = "form-control datetimepicker" } })

初始化JS时直接针对.datetimepicker类即可，样式完全和现有Bootstrap应用一致，不需要额外调整。

替代方案（如果EditorFor受限）：

如果因为模型配置等原因无法用EditorFor，直接用TextBoxFor也能达到完全一致的视觉效果：

@Html.TextBoxFor(model => model.MyDate, "{0:dd/MM/yyyy}", new { @class = "form-control datetimepicker" })

备选方案：Flatpickr #

要是你倾向于更轻量的插件，Flatpickr也是个不错的选择，它同样支持多格式切换、全浏览器兼容，并且可以通过配置Bootstrap主题来匹配现有风格，初始化示例：

flatpickr(".datetimepicker", {
  dateFormat: "d/m/Y",
  allowInput: true,
  wrap: false
});

切换格式只需修改dateFormat参数，对Razor视图的适配也同样友好。

为什么放弃bootstrap.v3.datepicker？ #

旧版的bootstrap.v3.datepicker已经停止维护多年，很多浏览器兼容问题（尤其是IE下的日期解析）都没有修复，而Tempus Dominus是它的官方替代，一直在更新迭代，完美解决了这些遗留问题。

内容的提问来源于stack exchange，提问作者D.Man