当前位置：首页 > VUE

实现vue datepicker

2026-03-07 06:52:04VUE

Vue Datepicker 实现方法

使用第三方库（推荐）

安装 vuejs-datepicker 或 v-calendar 等成熟组件库：

npm install vuejs-datepicker

在组件中引入并注册：

import Datepicker from 'vuejs-datepicker';

export default {
  components: {
    Datepicker
  }
}

模板中使用：

<datepicker :format="'yyyy-MM-dd'" v-model="selectedDate"></datepicker>

自定义基础实现

创建自定义组件 BasicDatepicker.vue：

<template>
  <div class="datepicker">
    <input 
      type="date" 
      v-model="internalValue"
      @input="handleInput"
    />
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      internalValue: this.value
    }
  },
  methods: {
    handleInput() {
      this.$emit('input', this.internalValue);
    }
  },
  watch: {
    value(newVal) {
      this.internalValue = newVal;
    }
  }
}
</script>

增强型自定义组件

实现带日历弹窗的版本：

<template>
  <div class="enhanced-datepicker">
    <input 
      v-model="displayValue"
      @focus="showPicker = true"
      readonly
    />
    <div v-if="showPicker" class="calendar">
      <div class="header">
        <button @click="prevMonth">←</button>
        {{ currentMonth }}
        <button @click="nextMonth">→</button>
      </div>
      <div class="days-grid">
        <div v-for="day in days" :key="day.date">
          <button @click="selectDate(day)">{{ day.day }}</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPicker: false,
      currentDate: new Date(),
      selectedDate: null
    }
  },
  computed: {
    days() {
      // 生成当月日期数组的逻辑
    },
    currentMonth() {
      return this.currentDate.toLocaleString('default', { month: 'long' });
    }
  },
  methods: {
    prevMonth() {
      this.currentDate.setMonth(this.currentDate.getMonth() - 1);
    },
    nextMonth() {
      this.currentDate.setMonth(this.currentDate.getMonth() + 1);
    },
    selectDate(day) {
      this.selectedDate = day.date;
      this.showPicker = false;
      this.$emit('input', day.date);
    }
  }
}
</script>

关键功能点

日期格式处理：使用 moment.js 或 date-fns 处理日期格式化
国际化支持：配置多语言日期显示
范围选择：扩展支持开始/结束日期选择
禁用日期：通过 prop 传递不可选日期
移动端适配：添加触摸事件支持

样式定制

通过 CSS 变量或 SCSS 覆盖默认样式：

实现vue datepicker

.enhanced-datepicker {
  --primary-color: #42b983;
  --text-color: #2c3e50;
}

.calendar {
  border: 1px solid #eee;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}