实现vue datepicker

以下是实现 Vue Datepicker 的几种方法和步骤：

使用第三方库（如 vue-datepicker）

安装 vue-datepicker 库：

npm install vue-datepicker --save

在 Vue 组件中引入并使用：

<template>
  <datepicker v-model="selectedDate"></datepicker>
</template>

<script>
import Datepicker from 'vue-datepicker';

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

自定义基础 Datepicker 组件

创建自定义 Datepicker 组件：

<template>
  <div class="datepicker">
    <input 
      type="text" 
      v-model="displayDate" 
      @focus="showCalendar = true"
      @blur="handleBlur"
    >
    <div class="calendar" v-if="showCalendar">
      <div class="calendar-header">
        <button @click="prevMonth">←</button>
        <span>{{ currentMonth }} {{ currentYear }}</span>
        <button @click="nextMonth">→</button>
      </div>
      <div class="calendar-grid">
        <div v-for="day in days" :key="day" class="calendar-day">
          {{ day }}
        </div>
        <div 
          v-for="date in visibleDates" 
          :key="date.getTime()"
          class="calendar-date"
          :class="{ 'selected': isSelected(date) }"
          @click="selectDate(date)"
        >
          {{ date.getDate() }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: null,
      displayDate: '',
      showCalendar: false,
      currentDate: new Date(),
      days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    };
  },
  computed: {
    currentMonth() {
      return this.currentDate.toLocaleString('default', { month: 'long' });
    },
    currentYear() {
      return this.currentDate.getFullYear();
    },
    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 = 1; i <= lastDay.getDate(); i++) {
        dates.push(new Date(year, month, 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.toDateString() === this.selectedDate.toDateString();
    },
    handleBlur() {
      setTimeout(() => {
        this.showCalendar = false;
      }, 200);
    }
  }
};
</script>

<style>
.datepicker {
  position: relative;
  display: inline-block;
}

.calendar {
  position: absolute;
  border: 1px solid #ddd;
  padding: 10px;
  background: white;
  z-index: 1000;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.calendar-day, .calendar-date {
  text-align: center;
  padding: 5px;
}

.calendar-date:hover {
  background-color: #eee;
  cursor: pointer;
}

.selected {
  background-color: #4285f4;
  color: white;
}
</style>

使用 Vuetify 的日期选择器

安装 Vuetify：

vue add vuetify

使用 Vuetify 的日期选择器组件：

<template>
  <v-app>
    <v-container>
      <v-date-picker v-model="date"></v-date-picker>
    </v-container>
  </v-app>
</template>

<script>
export default {
  data: () => ({
    date: new Date().toISOString().substr(0, 10)
  })
};
</script>

使用 Element UI 的日期选择器

安装 Element UI：

npm install element-ui -S

在 main.js 中引入：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

在组件中使用：

<template>
  <div>
    <el-date-picker v-model="date" type="date"></el-date-picker>
  </div>
</template>

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

每种方法都有其适用场景：第三方库适合快速实现，自定义组件适合特定需求，UI 框架集成适合已有项目架构。根据项目需求选择最合适的方法。