You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何让b-form-datepicker仅支持月份和年份选择?

实现b-form-datepicker仅选择年月的方案

完全可以实现,只需要配置组件的几个核心属性和选项就能做到,具体操作如下:

  • 设定日期显示格式:通过date-format和picker-date-format指定为年月格式(比如YYYY-MM),确保输入框和选择器内的显示只保留年月信息
  • 限制选择器视图层级:在datepicker-options里配置视图参数,让选择器只能切换到月份层级,禁止选择具体日期

直接上可用的代码示例:

<template>
  <b-form-datepicker
    v-model="selectedMonthYear"
    date-format="YYYY-MM"
    picker-date-format="YYYY-MM"
    :datepicker-options="yearMonthPickerOptions"
    placeholder="点击选择年月"
  ></b-form-datepicker>
</template>

<script>
export default {
  data() {
    return {
      selectedMonthYear: null,
      yearMonthPickerOptions: {
        startView: 'year', // 打开选择器时默认展示年份选择视图
        minView: 'month', // 限制最小选择层级为月份,无法选择具体日期
        autoclose: true // 选择年月后自动关闭选择器
      }
    }
  }
}
</script>

配置后的效果:打开选择器先选年份,选完后跳转到对应年份的月份列表,选完月份自动关闭,选中的值和输入框显示都是YYYY-MM格式,完全符合仅选年月的需求。

内容的提问来源于stack exchange,提问作者Mertcan

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.03 00:45:45