Bootstrap日期选择器onSelect事件触发后日期格式变更问题求助

嘿，这个问题我之前也踩过坑！原因其实很直白：当你用$("#acafimon").datepicker({...})重新初始化日期选择器时，会完全覆盖掉之前通过data-*属性设置的所有配置——包括data-date-format和只显示年月的规则，所以才会变回默认的mm/dd/yyyy格式并显示日期选择面板。

给你两种靠谱的解决办法：

方法一：在jQuery初始化时统一配置所有参数 #

把格式、视图限制和onSelect事件都写在初始化的配置对象里，不用再依赖data-*属性（当然保留也不冲突，JS配置优先级更高）：

<div class="input-group date"> 
  <input id="acafimon" name="nperfimon" type="text" class="form-control"> 
  <div class="input-group-addon"> 
    <span class="glyphicon glyphicon-th"></span> 
  </div> 
</div>

$("#acafimon").datepicker({
    format: "mm/yyyy", // 指定输入框显示的日期格式
    viewMode: "months", // 初始打开时显示月份视图
    minViewMode: "months", // 限制用户只能选择月份，无法选择具体日期
    onSelect: function() { 
        alert("Date Selected"); 
    }
});

方法二：继承data属性配置并添加onSelect事件 #

如果你想保留data-*属性的配置（比如不想修改现有HTML），可以先获取这些配置项，再合并onSelect事件进去：

// 先拿到带有data属性的父容器
var $dateContainer = $("#acafimon").parent('.input-group.date');
// 获取所有data-*属性对应的配置参数
var dateOptions = $dateContainer.data();
// 添加上onSelect事件
dateOptions.onSelect = function() {
    alert("Date Selected");
};
// 用合并后的配置重新初始化日期选择器
$("#acafimon").datepicker(dateOptions);

这里要划重点：Bootstrap Datepicker里viewMode和minViewMode是确保只显示年月选择器的核心，只靠format是不够的——它只控制输入框的显示格式，而视图模式才会限制选择器的交互界面。

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