Angular中如何让ngx-bootstrap datepicker返回选中月份最后一天

问题原因 #

所有月维度选择的日历控件默认返回值都是所选月份的1号，不需要修改组件源码，只要在选中回调里对返回值做一次日期转换，就能拿到当月最后一天。

实现代码 #

核心逻辑利用JS日期API的自动偏移特性，不需要手动维护每个月的天数表，自动适配闰年2月、大小月场景：

/**
 * 传入选中月的任意日期，返回当月最后一天的日期对象
 * @param {Date|string|number} selected 月选择控件返回的默认值（一般为当月1号）
 * @returns {Date} 当月最后一天的日期对象
 */
const getLastDayOfMonth = (selected) => {
  const date = new Date(selected)
  // 月份往后推1个月，日期设为0，自动回退到上月最后一天，即所选月的最后一天
  date.setMonth(date.getMonth() + 1)
  date.setDate(0)
  return date
}

// 调用示例：选中2022年6月时，控件返回2022-06-01，传入方法后得到2022-06-30
const targetDate = getLastDayOfMonth('2022-06-01')

不同组件库适配方式 #

• Element UI/Element Plus：type="month"的日期选择器，在@change事件回调中拿到默认返回的当月首日，传入上述方法转换即可
• Ant Design/Ant Design Vue：设置picker="month"的日期选择器，在onChange回调中做相同转换
• 自研日历控件：点击月份触发选中逻辑时，不要直接赋值YYYY-MM-01作为结果，直接调用上述方法计算最终值返回

注意：如果需要格式化输出为YYYY-MM-DD格式的字符串，直接对返回的日期对象做格式化处理即可，不需要额外做天数判断。

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