当前位置：首页 > VUE

vue datepicker 实现

2026-02-09 22:58:27VUE

Vue Datepicker 实现方法

使用第三方库（推荐）

安装 vue-datepicker 或其他流行库如 v-calendar 或 vue2-datepicker：

npm install vue2-datepicker --save

在 Vue 组件中引入并使用：

<template>
  <date-picker v-model="selectedDate" />
</template>

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

export default {
  components: { DatePicker },
  data() {
    return {
      selectedDate: new Date()
    };
  }
};
</script>

自定义 Datepicker 组件

创建一个基础的日期选择组件：

vue datepicker 实现

<template>
  <div class="datepicker">
    <input 
      type="text" 
      v-model="displayDate" 
      @click="showCalendar = !showCalendar" 
      readonly 
    />
    <div class="calendar" v-if="showCalendar">
      <div class="header">
        <button @click="prevMonth">‹</button>
        <span>{{ currentMonth }}</span>
        <button @click="nextMonth">›</button>
      </div>
      <div class="days">
        <div v-for="day in days" :key="day" class="day-header">{{ day }}</div>
      </div>
      <div class="dates">
        <div 
          v-for="date in visibleDates" 
          :key="date.getTime()"
          @click="selectDate(date)"
          :class="{ 'selected': isSelected(date) }"
        >
          {{ date.getDate() }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: null,
      displayDate: '',
      showCalendar: false,
      currentDate: new Date(),
      days: ['日', '一', '二', '三', '四', '五', '六']
    };
  },
  computed: {
    currentMonth() {
      return this.currentDate.toLocaleString('default', { month: 'long', year: 'numeric' });
    },
    visibleDates() {
      const year = this.currentDate.getFullYear();
      const month = this.currentDate.getMonth();
      const firstDay = new Date(year, month, 1);
      const lastDay = new Date(year, month + 1, 0);

      let dates = [];
      // 上个月的最后几天
      for (let i = 0; i < firstDay.getDay(); i++) {
        dates.push(new Date(year, month, -i));
      }
      // 当前月的所有天
      for (let i = 1; i <= lastDay.getDate(); i++) {
        dates.push(new Date(year, month, i));
      }
      // 下个月的前几天
      const remaining = 42 - dates.length;
      for (let i = 1; i <= remaining; i++) {
        dates.push(new Date(year, month + 1, i));
      }
      return dates;
    }
  },
  methods: {
    prevMonth() {
      this.currentDate = new Date(
        this.currentDate.getFullYear(),
        this.currentDate.getMonth() - 1,
        1
      );
    },
    nextMonth() {
      this.currentDate = new Date(
        this.currentDate.getFullYear(),
        this.currentDate.getMonth() + 1,
        1
      );
    },
    selectDate(date) {
      this.selectedDate = date;
      this.displayDate = date.toLocaleDateString();
      this.showCalendar = false;
    },
    isSelected(date) {
      return this.selectedDate && 
        date.getDate() === this.selectedDate.getDate() &&
        date.getMonth() === this.selectedDate.getMonth() &&
        date.getFullYear() === this.selectedDate.getFullYear();
    }
  }
};
</script>

<style>
.datepicker {
  position: relative;
  width: 200px;
}
.calendar {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border: 1px solid #ccc;
  background: white;
  z-index: 100;
}
.header {
  display: flex;
  justify-content: space-between;
  padding: 5px;
}
.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.selected {
  background-color: #42b983;
  color: white;
}
</style>