所属分类：web前端开发
Vue 是一款非常流行的 JavaScript 框架，它提供的组件化和数据驱动的方式让开发者可以快速地搭建复杂的应用程序。其中数据双向绑定的特性使得 Vue 可以非常方便地实现表单相关的功能，比如日期选择器。本文将介绍如何使用 Vue 实现日期选择器。
在开始之前，我们需要先安装 Vue。可以使用 npm 或 yarn 安装 Vue。
npm install vue
或者
yarn add vue
在 Vue 中，我们需要创建一个 Vue 实例来控制整个应用程序，同时也需要创建一个日期选择器组件。我们可以使用 Vue.component 的方式来定义日期选择器组件。
微博登录
QQ登录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'
})现在我们已经定义了日期选择器组件，可以在任何地方使用它了。在 HTML 中，我们只需要简单地添加一个 date-picker 标签就可以了。
<div id="app"> <date-picker v-model="date"></date-picker> </div>
<!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 的组件化和数据驱动的特点，通过 v-model 实现了表单数据和组件数据的双向绑定，方便了数据操作。同时也利用了 Vue 的计算属性和方法，使得代码更加简单易读。希望这篇文章可以帮助到正在学习 Vue 的朋友们。
