当前位置：首页 > VUE

vue实现日期选择

2026-03-09 19:11:56VUE

vue实现日期选择的方法

使用Element UI的DatePicker组件

Element UI提供了功能丰富的日期选择组件，支持多种日期格式和范围选择。安装Element UI后可直接使用。

安装依赖：

npm install element-ui

引入组件：

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="selectedDate"
    type="date"
    placeholder="选择日期"
    format="yyyy-MM-dd"
    value-format="yyyy-MM-dd">
  </el-date-picker>
</template>

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

使用Vant的DatetimePicker组件

移动端项目可使用Vant的日期选择器，支持原生体验。

安装依赖：

npm install vant

引入组件：

import Vue from 'vue';
import { DatetimePicker } from 'vant';
Vue.use(DatetimePicker);

模板中使用：

<template>
  <van-datetime-picker
    v-model="currentDate"
    type="date"
    :min-date="minDate"
    :max-date="maxDate"
    @confirm="onConfirm"
  />
</template>

<script>
export default {
  data() {
    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date()
    };
  },
  methods: {
    onConfirm(value) {
      this.currentDate = value;
    }
  }
};
</script>

使用原生HTML5 input

简单场景可直接使用HTML5的日期输入类型，无需额外依赖。

<template>
  <input type="date" v-model="date" @change="handleDateChange">
</template>

<script>
export default {
  data() {
    return {
      date: ''
    };
  },
  methods: {
    handleDateChange(e) {
      console.log('Selected date:', e.target.value);
    }
  }
};
</script>

自定义日期选择器

需要完全自定义时可结合第三方库如day.js和弹出层实现。

安装day.js：

npm install dayjs

示例实现：

vue实现日期选择

<template>
  <div>
    <input v-model="displayDate" @click="showPicker = true" readonly>
    <div v-if="showPicker" class="custom-picker">
      <div v-for="day in days" @click="selectDate(day)">
        {{ day }}
      </div>
      <button @click="showPicker = false">关闭</button>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs';

export default {
  data() {
    return {
      selectedDate: dayjs(),
      displayDate: '',
      showPicker: false,
      days: []
    };
  },
  mounted() {
    this.generateDays();
    this.displayDate = this.selectedDate.format('YYYY-MM-DD');
  },
  methods: {
    generateDays() {
      // 生成当月日期列表
    },
    selectDate(day) {
      this.selectedDate = dayjs(day);
      this.displayDate = this.selectedDate.format('YYYY-MM-DD');
      this.showPicker = false;
    }
  }
};
</script>