vue中el-date-picker选择日期的限制的项目实践
前言：
element-ui作为vue的龙头ui组件库，深受前端开发者的喜爱。
本文着重记录如何使用el-date-picker日期选择器，怎么去限制选择日期。先上官网链接---el-date-picker
基本使用：
先看下方代码
<template>
<div class="content">
<el-date-picker v-model="value" type="date" placeholder="选择日期">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>这是一个最基本的使用方式，长这个样子。
下面先提一个需求，要求不能选择当前日期之前的日期，怎么办？看picker-options属性，我们需要在disabledDate上做文章！
<el-date-picker v-model="value" type="date" placeholder="选择日期" :picker-options="pickerOptions"></el-date-picker>
data() {
return {
value: '',
pickerOptions: {
disabledDate(time) {
return time.getTime() < Date.now();
},
}
};
},注意：返回的是布尔值，当为true的时候意思就是禁用，拿时间戳来进行比较，可以打印下time看下是什么，其实就是一个个的时间，取时间戳与当前时间进行比较，如果小于当前时间，那就意味着是之前的日期，为true，禁止选择，反之则可以选择
可以看到当鼠标放在灰色背景日期上时，是禁止点击选择的。
时间区间：
难度升级：日期只能选择今后十天的日期，之前的日期和十天之后的日期都不能选择；其实这个也比较简单，首先我们要算出十天之后的日期的时间戳，这个很容易
const DAY = 10 const nowTimer = Date.now() const lastTimer = nowTimer + DAY * 24 * 60 * 60 * 1000
而后我们依然在disabledDate中去进行比较！
pickerOptions: {
disabledDate(time) {
return time.getTime() < nowTimer || time.getTime() > lastTimer;
},
}看看效果：写此文档的日期是2023-03-31，我们只能选择04-01至04-10的日期，没啥毛病
公司业务：选择一个日期区间，但是只能选择本月
这里我把在公司写的一个业务也放上来，需求是，选择一个日期区间，要求只能在当前月选择！
1.首先使用el-date-picker组件，设置type为daterange，这个不存在什么问题
<el-date-picker v-model="value" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
2.如何去限制选择区间在本月
有了上面的一些经验之后，很明显我只需要time.getTime()这个值小于月初的那天为true，大于月末的那天为true即可，那这样有了思路就简单了很多！
① 获取当前月份
const date = new Date() const year = date.getFullYear(); //获取年份 let month = date.getMonth() + 1; //获取月份
② 获取当前月的第一天，都是从1号开始的，这个没啥异议吧
const startDate = `${year}-${month}-01 00:00:00`③ 获取当前月的最后一天，这个有点问题，因为有的月30天，有的月31天，2月甚至是28天或者是29天，有的人可能会想着还需要判断当前年是否为闰年或者平年，再以此在判断当前月是多少天，这样就复杂了，js date对象有更简单的方式
const lastDay = new Date(year, month, 0).getDate(); //获取当月最后一日
const endDate = `${year}-${month}-${lastDay} 23:59:59`④ 把开始时间和结束事件整成时间戳，方便计较
new Date(startDate).getTime(), new Date(endDate).getTime()
⑤ 写成一个方法，有返回结果，返回结果为一个数组，包含两个元素，开始时间戳以及结束时间戳
const getDateRange = () => {
const date = new Date()
const year = date.getFullYear(); //获取年份
let month = date.getMonth() + 1; //获取月份
const lastDay = new Date(year, month, 0).getDate(); //获取当月最后一日
month = month < 10 ? '0' + month : month;
const startDate = `${year}-${month}-01 00:00:00`
const endDate = `${year}-${month}-${lastDay} 23:59:59`
return [new Date(startDate).getTime(), new Date(endDate).getTime()]
}pickerOptions: {
disabledDate(time) {
const [startTimer, endTimer] = getDateRange()
return time.getTime() < startTimer || time.getTime() > endTimer;
},
}效果！可以看出这便是限制成功了！
day.js简化版1
本人喜欢在项目中安装day.js这个包，作为项目中有关时间处理的插件---day.js
我们使用此插件可以很轻易的得到我们想要的时间。
import dayjs from "dayjs"
const getDateRange = () => {
const startTimer = dayjs().startOf('month').valueOf()
const endTimer = dayjs().endOf('month').valueOf()
return [startTimer, endTimer]
}
pickerOptions: {
disabledDate(time) {
const [startTimer, endTimer] = getDateRange()
return time.getTime() < startTimer || time.getTime() > endTimer;
},
}
day.js简化版2
思路就是利用day.js中的isBetween插件进行日期区间的判断
import dayjs from "dayjs"
const isBetween = require('dayjs/plugin/isBetween')
dayjs.extend(isBetween)
const getDateRange = () => {
const startDate = dayjs().startOf('month').format("YYYY-MM-DD")
const endDate = dayjs().endOf('month').format("YYYY-MM-DD")
return [startDate, endDate]
}
disabledDate(time) {
const [startDate, endDate] = getDateRange()
const result = dayjs(time).isBetween(startDate, dayjs(endDate), 'day', '[]')
return !result
},
day.js非常轻巧，功能强大，插件众多，用好了绝对是前端的一大杀器，感兴趣的不妨试试！
到此这篇关于vue中el-date-picker选择日期的限制的项目实践的文章就介绍到这了,更多相关el-date-picker选择日期限制内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue中ref和e.target的区别以及ref用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家介绍了buildAdmin开源项目引入四种图标方式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了vue3 $attrs和inheritAttrs的用法说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue-router编程式导航的实现代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-03-03
Vue 3 响应式系统中ref 在 reactive 中的自动解包行为
Vue3中,ref与reactive配合使用时会自动解包,使代码更简洁,响应式系统更智能,替换ref会断开旧连接,浅层reactive/shallowRef不触发解包,但是需注意区分,下面通过示例给大家介绍Vue3响应式探秘：ref 在reactive中的自动解包行为解析,感兴趣的朋友一起看看吧2025-07-07
这篇文章主要为大家详细介绍了vue实现循环切换动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
Vue本来无需操作DOM来更新界面,而且Vue也不推荐我们直接操作DOM,但是我们非要拿到DOM操作DOM怎么办,下面这篇文章主要给大家介绍了关于Vue3获取DOM节点的3种方式,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了vue之Vue.use的使用场景，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了vue-cli 配置资源引用的绝对路径的问题，本文通过图文实例相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-09-09
这篇文章主要为大家详细介绍了VUEJS实战之修复错误并且美化时间，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
最新评论