vue实现日期选择
Vue 实现日期选择的方法
使用原生 HTML5 input[type="date"]
Vue 可以直接绑定原生日期输入控件，适合简单场景且不需要复杂样式定制。
<template>
<input type="date" v-model="selectedDate" @change="handleDateChange">
</template>
<script>
export default {
data() {
return {
selectedDate: ''
}
},
methods: {
handleDateChange() {
console.log('Selected date:', this.selectedDate)
}
}
}
</script>使用第三方组件库
主流UI库提供功能丰富的日期选择器：
Element UI
<template>
<el-date-picker
v-model="date"
type="date"
placeholder="选择日期">
</el-date-picker>
</template>
<script>
export default {
data() {
return {
date: ''
}
}
}
</script>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>使用专用日期选择库
vue-datepicker 安装后使用：
npm install vue-datepicker --save<template>
<date-picker v-model="date"></date-picker>
</template>
<script>
import DatePicker from 'vue-datepicker'
export default {
components: {
DatePicker
},
data() {
return {
date: ''
}
}
}
</script>自定义日期选择组件
如需完全自定义，可基于日历算法实现：
<template>
<div class="custom-datepicker">
<div class="calendar-header">
<button @click="prevMonth">←</button>
<span>{{ currentYear }}-{{ currentMonth }}</span>
<button @click="nextMonth">→</button>
</div>
<div class="calendar-grid">
<!-- 日历日期渲染逻辑 -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
currentDate: new Date(),
selectedDate: null
}
},
computed: {
currentYear() {
return this.currentDate.getFullYear()
},
currentMonth() {
return this.currentDate.getMonth() + 1
}
},
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
)
}
}
}
</script>日期格式处理
使用 moment.js 或 date-fns 处理日期格式：
import moment from 'moment'
// 格式化输出
moment(this.selectedDate).format('YYYY-MM-DD')
// 多语言支持
moment.locale('zh-cn')注意事项
- 移动端需考虑触摸交互体验
- 时区处理需保持一致
- 清空功能需明确交互方式
- 禁用日期可通过计算属性实现
- 范围选择需维护开始/结束两个状态值
