当前位置：首页 > VUE

vue datepicker 实现

2026-01-07 07:34:44VUE

实现 Vue Datepicker 的基本方法

在 Vue 项目中实现日期选择功能，可以使用第三方库如 vue-datepicker 或 v-calendar。以下是两种常见实现方式：

安装 vue-datepicker 库

npm install vuejs-datepicker --save

基础使用示例

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

<script>
import Datepicker from 'vuejs-datepicker'

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

使用 v-calendar 实现更丰富的功能

安装 v-calendar

npm install v-calendar

全局注册组件

import Vue from 'vue'
import VCalendar from 'v-calendar'

Vue.use(VCalendar)

模板中使用

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

<script>
export default {
  data() {
    return {
      date: new Date()
    }
  }
}
</script>

自定义日期格式和语言

设置中文语言和自定义格式

<template>
  <datepicker 
    v-model="selectedDate"
    :language="zh"
    format="yyyy-MM-dd"
  ></datepicker>
</template>

<script>
import Datepicker from 'vuejs-datepicker'
import { zh } from 'vuejs-datepicker/dist/locale'

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

禁用特定日期

禁用周末日期

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

<script>
export default {
  data() {
    return {
      selectedDate: new Date(),
      disabledDates: {
        days: [0, 6] // 禁用周日和周六
      }
    }
  }
}
</script>

范围选择功能

实现日期范围选择

<template>
  <datepicker
    v-model="dateRange"
    range
  ></datepicker>
</template>

<script>
export default {
  data() {
    return {
      dateRange: {
        start: new Date(2023, 0, 1),
        end: new Date(2023, 0, 5)
      }
    }
  }
}
</script>

内联显示日期选择器

固定显示日期选择器

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

主题和样式自定义

自定义样式

vue datepicker 实现

<template>
  <datepicker
    v-model="selectedDate"
    input-class="custom-input"
    calendar-class="custom-calendar"
  ></datepicker>
</template>

<style>
.custom-input {
  padding: 8px;
  border: 1px solid #ccc;
}

.custom-calendar {
  border: 1px solid #eee;
}
</style>

这些方法提供了从基础到高级的日期选择器实现方案，可以根据项目需求选择合适的实现方式。