ASP.NET Core MVC中从模型为Bootstrap Datepicker设置起始日期

要实现从模型加载起始日期并禁用过去日期的需求，需要调整以下几个核心部分：

1. 修正模型属性类型 #

将字符串类型的日期改为强类型DateTime?，避免格式解析混乱，同时符合ASP.NET MVC的最佳实践：

public DateTime? DateStart { get; set; }

2. 修复JS日期解析逻辑 #

Bootstrap Datepicker和原生JS的Date对象对dd.MM.yyyy格式支持不佳，需要先将模型日期转换为JS可识别的格式，同时配置日期选择器的关键参数：

方案一：拆分日期组件生成合法JS Date对象 #

$(document).ready(function(){
    // 获取模型传递的日期字符串（格式：dd.MM.yyyy）
    var dateStr = '@Model.DateStart?.ToString("dd.MM.yyyy")';
    
    if(dateStr) {
        var dateParts = dateStr.split('.');
        // JS月份从0开始，需减1
        var targetDate = new Date(dateParts[2], dateParts[1]-1, dateParts[0]);
        
        $("#datepicker").datepicker({    
            startDate: targetDate, // 禁用该日期之前的所有日期
            defaultDate: targetDate, // 初始化时高亮并显示该日期
            language: "de"
        });
    } else {
        // 模型日期为空时，默认禁用过去日期
        $("#datepicker").datepicker({    
            startDate: new Date(),
            language: "de"
        });
    }
});

方案二：通过C#转换为ISO格式直接生成JS Date #

$(document).ready(function(){
    // 用C#将日期转为ISO格式（yyyy-MM-dd），JS可直接解析
    var targetDate = new Date('@Model.DateStart?.ToString("yyyy-MM-dd")');
    
    $("#datepicker").datepicker({    
        startDate: targetDate,
        defaultDate: targetDate,
        language: "de"
    });
});

3. 确保Input正确绑定日期格式 #

在input标签上添加asp-format属性，让视图渲染出和模型输出一致的日期格式：

<div class="form-group row">                            
    <div class="col-sm-3">                                                                                         
        <input type="text" asp-for="DateStart" asp-format="{0:dd.MM.yyyy}" class="form-control" id="datepicker"/>                            
        @Html.ValidationMessageFor(model => model.DateStart, "", new { @class = "text-danger" })
    </div>
</div>

关键参数说明 #

• startDate：设置日期选择器的最小可选日期，实现“过去日期置灰不可选”的需求。
• defaultDate：指定日期选择器初始化时默认选中并高亮的日期，对应“显示并高亮模型起始日期”的需求。
• 增加空值判断可以避免模型DateStart为空时出现JS报错。

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