使用jQuery从mm/yyyy格式Bootstrap日期选择器值中提取月份失败如何解决

根因说明 #

你当前代码执行失败的核心原因是：*mm/yyyy*格式的字符串不符合大部分浏览器Date构造函数的标准解析规则，会被解析为Invalid Date，因此调用getMonth()无法返回正确值。

可行方案 #

方案1：直接分割字符串提取（最简单，兼容性最高） #

适合仅需要提取月份、不需要完整日期对象的场景，不需要处理日期解析逻辑：

$('#from_date').on('change', function() {
  var from_date = $("#from_date").val(); // 取值为01/2021格式
  // 按/分割字符串，第一个元素即为月份，默认是字符串格式
  var monthStr = from_date.split('/')[0];
  // 转10进制数字，得到1-12范围的自然月份值
  var monthNum = parseInt(monthStr, 10);
  console.log(monthNum);
});

方案2：用Bootstrap Datepicker内置方法取日期对象（适合需要后续日期计算的场景） #

直接调用组件自带的getDate方法，返回标准原生Date对象，不需要自己处理格式解析：

$('#from_date').on('change', function() {
  // 调用datepicker内置方法直接获取Date对象
  var dateObj = $(this).datepicker('getDate');
  // getMonth返回0-11的索引值，加1即可得到1-12范围的自然月份
  var month = dateObj.getMonth() + 1;
  console.log(month);
});

注意事项 #

• 两种方案都可以正常获取月份，优先选方案2，避免手动处理格式可能出现的异常
• 如果需要保留原来的日期构造写法，可以手动补全日为01，将字符串转为01/01/2021格式后再传入Date构造函数即可解析成功

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