使用Bootstrap Datepicker设置日期格式遇问题：无法更新输入框值

问题原因 #

你当前代码的核心问题是：调用$("#date-input").datepicker("update", formattedDate)时，传入的带星期的格式化字符串不符合初始化时设置的format: "mm/dd/yyyy"格式，Bootstrap Datepicker无法识别该字符串为有效日期，因此不会更新输入框内容。

方案一：直接配置Datepicker显示目标格式 #

Bootstrap Datepicker内置支持通过格式符定义显示样式，完全可以直接在初始化时指定你需要的「星期几 - 月份 日, 年份」格式，无需额外的changeDate事件处理：

修改后的JavaScript代码

$(document).ready(function () {
    $("#date-input").datepicker({
        format: "dddd - MMMM D, YYYY", // 对应目标格式的内置格式符
        autoclose: true,
    });
});

格式符说明：

• dddd：完整星期名称（如Wednesday）
• MMMM：完整月份名称（如January）
• D：不带前导零的日期数字（如1）
• YYYY：4位年份数字

方案二：分离显示格式与提交格式（适用于需后台提交标准日期的场景） #

如果需要给后台提交mm/dd/yyyy格式的日期，同时前端显示带星期的格式，可以用一个隐藏输入框存储真实提交值，另一个输入框负责展示格式化后的内容：

修改后的HTML结构

<div class="col-md-6">
 <div class="form-group">
  <label>Date</label>
  <div class="date input-group">
   <input
    type="text"
    class="form-control"
    id="date-display"
    readonly
   />
   <input
    type="hidden"
    id="date-input"
    name="date"
   />
  </div>
 </div>
</div>

修改后的JavaScript代码

$(document).ready(function () {
    // 初始化Datepicker绑定到隐藏输入框，使用标准提交格式
    $("#date-input").datepicker({
        format: "mm/dd/yyyy",
        autoclose: true,
    }).on("changeDate", function (e) {
        const selectedDate = e.date;
        const displayOptions = { weekday: "long", year: "numeric", month: "long", day: "numeric" };
        const formattedDisplayDate = selectedDate.toLocaleDateString("en-US", displayOptions);
        // 更新前端显示用的输入框
        $("#date-display").val(formattedDisplayDate);
    });
});

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