使用Vue编写一个日期选择器
作者：我爱学习yq
这篇文章主要为大家详细介绍了如何使用Vue编写一个简单的日期选择器,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
在 Vue 中实现日期选择器的方法有很多，下面提供一个简单的实现方法。
首先，在需要使用日期选择器的组件中引用 Vue 和 date-fns 库，date-fns 库是一个轻量级的 JavaScript 时间日期工具库，可以方便地处理日期的格式化和计算。
import Vue from 'vue'
import { format } from 'date-fns'
export default {
data () {
return {
selectedDate: null
}
},
methods: {
formatDate (date) {
return format(date, 'yyyy-MM-dd')
},
selectDate (date) {
this.selectedDate = date
}
}
}
在模板中使用第三方日期选择器组件，这里使用了 Element UI 库中的 DatePicker 组件。同时给 DatePicker 组件绑定 onChange 事件，将选中的日期保存到 data 中的 selectedDate 变量中。
<template>
<div>
<el-date-picker
v-model="selectedDate"
type="date"
format="yyyy-MM-dd"
@change="selectDate(selectedDate)">
</el-date-picker>
</div>
</template>
在 methods 中定义 formatDate 方法来格式化日期，并定义 selectDate 方法来处理选择日期的操作。
import Vue from 'vue'
import { format } from 'date-fns'
export default {
data () {
return {
selectedDate: null
}
},
methods: {
formatDate (date) {
return format(date, 'yyyy-MM-dd')
},
selectDate (date) {
this.selectedDate = date
}
}
}
这样，一个简单的 Vue 日期选择器就完成了，可以根据实际需要进行扩展和修改。
方法补充
除了上文的方法，小编还为大家整理了其他vue实现日期选择器的方法，下面是示例代码，希望对大家有所帮助
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 日期选择器</title>
<style>
.datepicker {
position: relative;
display: inline-block;
}
.datepicker input {
width: 120px;
padding: 4px;
border: 1px solid #ccc;
outline: none;
cursor: pointer;
}
.datepicker-panel {
position: absolute;
top: 30px;
left: 0;
z-index: 1000;
border: 1px solid #ccc;
background-color: #fff;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
}
.datepicker-content {
padding: 10px;
}
.datepicker-header {
margin-bottom: 10px;
text-align: center;
}
.datepicker-header span {
margin: 0 10px;
cursor: pointer;
}
.datepicker-body {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.datepicker-row {
display: flex;
}
.datepicker-cell {
width: calc(100% / 7);
text-align: center;
cursor: pointer;
}
.datepicker-cell.filled:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<div id="app">
<date-picker v-model="date"></date-picker>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('date-picker', {
template: `
<div class="datepicker">
<input type="text" v-model="value" @click="showPicker">
<div class="datepicker-panel" v-show="visible">
<div class="datepicker-content">
<div class="datepicker-header">
<span class="datepicker-prev-year" @click="prevYear"><<</span>
<span class="datepicker-prev-month" @click="prevMonth"><</span>
<span class="datepicker-current-month">{{ currentMonth }}</span>
<span class="datepicker-next-month" @click="nextMonth">></span>
<span class="datepicker-next-year" @click="nextYear">>></span>
</div>
<div class="datepicker-body">
<div class="datepicker-row" v-for="week in weeks">
<span class="datepicker-cell"
v-for="day in week"
:class="{'filled': day !== ''}"
@click="selectDate(day)">
{{ day }}
</span>
</div>
</div>
</div>
</div>
</div>
`,
props: {
value: {
type: String,
default: ''
}
},
data() {
return {
visible: false,
year: 0,
month: 0,
day: 0
}
},
computed: {
currentMonth() {
return `${this.year} 年 ${this.month} 月`
},
weeks() {
return this.getWeeks(this.year, this.month)
}
},
methods: {
showPicker() {
this.visible = true
const date = new Date()
this.year = date.getFullYear()
this.month = date.getMonth() + 1
this.day = date.getDate()
},
prevYear() {
this.year--
},
nextYear() {
this.year++
},
prevMonth() {
if (this.month === 1) {
this.year--
this.month = 12
} else {
this.month--
}
},
nextMonth() {
if (this.month === 12) {
this.year++
this.month = 1
} else {
this.month++
}
},
getWeeks(year, month) {
const weeks = []
const firstDay = new Date(year, month - 1, 1).getDay()
const lastDay = new Date(year, month, 0).getDate()
let week = []
for (let i = 0; i < firstDay; i++) {
week.push('')
}
for (let i = 1; i <= lastDay; i++) {
week.push(i)
if ((firstDay + i) % 7 === 0) {
weeks.push(week)
week = []
}
}
if (week.length > 0) {
for (let i = 0; i < 7 - week.length; i++) {
week.push('')
}
weeks.push(week)
}
return weeks
},
selectDate(day) {
if (day) {
this.value = `${this.year}-${this.month}-${day}`
this.visible = false
}
}
}
})
new Vue({
el: '#app',
data: {
date: ''
}
})
</script>
</body>
</html>到此这篇关于使用Vue编写一个日期选择器的文章就介绍到这了,更多相关Vue日期选择器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！