当前位置：首页 > VUE

实现vue datepicker

2026-02-10 07:00:22VUE

Vue Datepicker 实现方法

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

安装 vue-datepicker 库：

npm install vue-datepicker --save

在组件中引入并使用：

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

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

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

自定义 Datepicker 组件

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

<template>
  <div class="datepicker">
    <input 
      type="text" 
      v-model="displayDate"
      @focus="showCalendar = true"
      @blur="handleBlur"
    >
    <div class="calendar" v-if="showCalendar">
      <!-- 日历逻辑实现 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: new Date(),
      displayDate: '',
      showCalendar: false
    };
  },
  methods: {
    handleBlur() {
      setTimeout(() => {
        this.showCalendar = false;
      }, 200);
    }
  }
};
</script>

<style>
.datepicker {
  position: relative;
}
.calendar {
  position: absolute;
  border: 1px solid #ccc;
  padding: 10px;
  background: white;
  z-index: 1000;
}
</style>

使用 Element UI 的 Datepicker

安装 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>
  <el-date-picker
    v-model="value"
    type="date"
    placeholder="选择日期">
  </el-date-picker>
</template>

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

使用 Vuetify 的 Datepicker

安装 Vuetify：

npm install vuetify

在 main.js 中配置：

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);

在组件中使用：

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

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

实现自定义日历逻辑

对于完全自定义的实现，需要处理以下核心功能：

生成月份日历网格
处理日期选择事件
支持日期范围选择
添加禁用日期功能
国际化支持

关键代码示例：

// 生成当月日期数组
generateDays() {
  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 days = [];
  // 填充上个月末尾几天
  // 填充本月所有日期
  // 填充下个月开头几天
  return days;
}

日期格式化处理

使用 moment.js 或 date-fns 处理日期格式：

实现vue datepicker

import moment from 'moment';

// 格式化日期
formatDate(date) {
  return moment(date).format('YYYY-MM-DD');
}

// 解析日期
parseDate(str) {
  return moment(str, 'YYYY-MM-DD').toDate();
}