如何从inline模式的Bootstrap Datepicker中获取年份值？

我来帮你搞定这个问题～你遇到的核心问题有两个：一是事件绑定的目标逻辑不对，二是用div作为Datepicker容器时，val()方法根本拿不到值（因为div不是表单控件，没有value属性）。

问题分析 #

1. 你之前尝试绑定.datepicker的dp.change事件，但.datepicker是弹出的选择器弹窗容器，不是你初始化Datepicker的那个div，所以事件没有正确触发到目标元素。
2. 就算事件触发成功，$(this).val()对div来说毫无意义——div本身没有value属性，自然返回空值，控制台也就没输出。

修正方案 #

我们直接在初始化Datepicker的元素上绑定事件，并且通过事件对象里的e.date来获取选中的年份（Bootstrap Datepicker依赖Moment.js，e.date是Moment对象，可以直接格式化出需要的字符串）。

方案1：继续使用div作为容器

修改你的JS代码如下：

$("#sandbox-container div").datepicker({ 
  format: "yyyy", 
  viewMode: "years", 
  minViewMode: "years" 
}).on("dp.change", function(e) { 
  // 从事件对象中获取选中的年份，格式化为YYYY格式
  var selectedYear = e.date.format("YYYY"); 
  console.log(selectedYear);
  // 可选：把选中的年份显示在div里
  $(this).text(selectedYear);
});

方案2：换成input元素（更推荐，适配表单控件的value逻辑）

先修改HTML，把div换成input：

<div class="row">
  <div class="col">
    <label class="usp-label usp-label-category" for="usp-category">Time</label>
    <div id="sandbox-container">
      <input type="text" readonly class="form-control">
    </div>
  </div>
</div>

然后JS代码可以这样写：

$("#sandbox-container input").datepicker({ 
  format: "yyyy", 
  viewMode: "years", 
  minViewMode: "years" 
}).on("dp.change", function(e) { 
  // 两种方式都可以获取年份，e.date的方式更可靠
  var selectedYear = $(this).val();
  // 或者：var selectedYear = e.date.format("YYYY");
  console.log(selectedYear);
});

这样修改后，控制台就能正常输出选中的年份啦～

内容的提问来源于stack exchange，提问作者rob.m