使用Vue编写一个日期选择器
更新时间：2023年12月05日 16:31:16 作者：我爱学习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日期选择器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue命令式组件的编写与应用小结,在这篇文章中,我会带你了解命令式组件的基本概念,并通过一些简单的示例来展示它们是如何工作的,需要的朋友可以参考下2024-03-03
v-cloak原理是先通过样式隐藏内容,然后在内存中进行值的替换,将替换的内容再反馈给界面,数据渲染完场之后,v-cloak 属性会被自动去除,本文详细介绍vue中v-cloak的作用和原理解析,感兴趣的朋友一起看看吧2023-09-09
其实很多公司都会有类似于用户权限树的增删改查功能，本文主要介绍了vue实现树形结构增删改查，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要为大家详细介绍了vue element upload实现图片本地预览，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-08-08
这篇文章主要为大家详细介绍了Vue.js组件tree实现无限级树形菜单代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要为大家详细介绍了VUE实现密码验证与提示功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
这篇文章主要介绍了vue-loader中引入模板预处理器的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
本文主要介绍了Element Timeline时间线的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
本文主要介绍了element 表格多级表头子列固定的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
这篇文章主要介绍了关于vue中标签的属性绑定值渲染问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
最新评论