vue实现选择月份

2026-01-15 05:42:14VUE

使用 Vue 实现选择月份功能

方法一：使用原生 HTML `<input type="month">`

Vue 可以直接绑定原生 HTML5 的月份选择器，简单高效：

<template>
  <input type="month" v-model="selectedMonth" @change="handleMonthChange">
</template>

<script>
export default {
  data() {
    return {
      selectedMonth: ''
    }
  },
  methods: {
    handleMonthChange() {
      console.log('Selected month:', this.selectedMonth); // 格式为 YYYY-MM
    }
  }
}
</script>

注意：部分老旧浏览器可能不支持此类型输入框。

方法二：使用第三方组件库

Element UI 的日期选择器支持月份选择模式：

<template>
  <el-date-picker
    v-model="selectedMonth"
    type="month"
    placeholder="选择月份"
    format="YYYY-MM"
    value-format="YYYY-MM">
  </el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      selectedMonth: ''
    }
  }
}
</script>

Ant Design Vue 的实现方式：

<template>
  <a-month-picker v-model:value="selectedMonth" format="YYYY-MM" />
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const selectedMonth = ref(null);
    return { selectedMonth };
  }
}
</script>

方法三：自定义月份选择组件

如需完全自定义样式和功能，可以手动实现：

<template>
  <div class="month-picker">
    <select v-model="selectedYear">
      <option v-for="year in years" :key="year" :value="year">{{ year }}</option>
    </select>
    <select v-model="selectedMonth">
      <option v-for="month in 12" :key="month" :value="month">
        {{ month }}月
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    const currentYear = new Date().getFullYear();
    return {
      years: Array.from({length: 10}, (_, i) => currentYear + i),
      selectedYear: currentYear,
      selectedMonth: new Date().getMonth() + 1
    }
  },
  watch: {
    selectedYear() {
      this.$emit('change', `${this.selectedYear}-${this.selectedMonth}`);
    },
    selectedMonth() {
      this.$emit('change', `${this.selectedYear}-${this.selectedMonth}`);
    }
  }
}
</script>

<style>
.month-picker {
  display: flex;
  gap: 10px;
}
</style>

方法四：使用 Vue Date Picker 库

安装 vue-datepicker-next 库：

npm install vue-datepicker-next

使用示例：

vue实现选择月份

<template>
  <date-picker
    v-model="selectedMonth"
    type="month"
    format="YYYY-MM"
    value-type="format"
  />
</template>

<script>
import DatePicker from 'vue-datepicker-next';
import 'vue-datepicker-next/index.css';

export default {
  components: { DatePicker },
  data() {
    return {
      selectedMonth: ''
    }
  }
}
</script>

每种方法适用于不同场景，原生输入最简单但兼容性有限，组件库提供丰富功能，自定义组件灵活性最高。根据项目需求选择合适方案。

标签: vue