element 日期选择器 disabledDate 多个可选范围

已于 2023-07-26 17:02:13 修改
阅读量466 收藏
点赞数
文章标签： vue.js 前端 javascript elementui
于 2023-07-26 16:57:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61504951/article/details/131942904
版权
该文章介绍如何在Vue.js应用中使用日期选择器组件，通过设置`disabledDate`方法来限制日期选择范围，包括两个特定的时间段：2022年7月1日到8月31日和2022年12月1日到2023年1月31日。
摘要由CSDN通过智能技术生成

要实现的功能 ：日期选择器要有多个可选范围 比如 2022-07-01——2022-08-31和2022-12-01——2023-01-31

html

<el-date-picker v-model="searchForm.curveDate" align="right" type="date"

placeholder="选择日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd" />

vue data

pickerOptions: this.dateRange()

methods

dateRange() {
      let that = this;
      return {
        disabledDate(time) {
          return (
            (time.getTime() > new Date(that.summerEndTime).getTime() ||
              time.getTime() <
                new Date(that.summerStartTime).getTime() - 3600 * 1000 * 24) &&
            (time.getTime() > new Date(that.winterEndTime).getTime() ||
              time.getTime() <
                new Date(that.winterStartTime).getTime() - 3600 * 1000 * 24)
          );
        },
      };
    },

listen1573
关注
详解element-ui动态限定的日期范围选择器代码片段
11-20
element-ui 的日期选择器的组件是 el-date-picker. 设定 pickerOptions2， data() { return { pickerOptions2: { disabledDate: theDate => { const oneDay = 3600 * 1000 * 24 const current = the
element 时间选择器，disabledDate同时限制多个条件
qq_45706352的博客
01-25 2087
<el-date-picker v-model="listQuery.allDate" type="daterange" range-separator="-" unlink-panels value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" class="data_piccker"
DatePicker 日期选择框 disabledDate(current, row) 传参
mostbighappy的博客
05-31 704
DatePicker 日期选择框 disabledDate(current, row) 传参
elementui日期多选pickerOptions日期范围选择，同时选多个值
qq_39695210的博客
03-15 1906
elementui日期多选pickerOptions日期范围选择，同时选多个值
disabledDate两个日期选择器，值是数组，在两个日期之间选择
FLEX_TT的博客
07-04 1301
。。。搞半天，其实用@focus可以解决 开始时间 @focus=“changeStart(domain)” 结束时间@focus=“changeEnd(domain)” 在data里：pickerOptions0：{} pickerOptions1：{} method里 changeStart(domain){ this.pickerOptions0=Object.assign({},this.pickerOptions0...
vue el-date-picker 选择多个月份
qq_42379323的博客
01-19 2418
el-date-picker 月份多选 选择多个月份
disabledDate 日期选择器 datePicker
MoXinXueWEB的博客
06-08 556
小菜鸟在摸鱼
element ui 中日期选择器disabledDate的几种用法
hellowang02的博客
07-06 6696
element ui 中日期选择器disabledDate的几种用法
element picker 组件限制选择日期
木白的博客
04-16 1025
<el-date-picker v-model="value1" type="date" placeholder="选择日期" :picker-options="pickerOptions"> </el-date-picker> <script> data (){ return { p...
Element DateTimePicker日期时间选择器的使用示例
12-28
组件—日期时间选择器 日期和时间点 默认 type=datetime placeholder=选择日期时间> 带快捷选项 <el-date-picker v-model=val
element年范围选择
05-23
此外，日期选择器还支持各种事件，如`change`事件，当用户选择新的日期范围时触发，可以获取到选择的开始和结束日期。这对于监听用户操作和更新相关业务逻辑非常有用。 ```javascript v-model="value" type=...
时间控件el-date-picker限制可选当前日期前七天
weixin_39547000的博客
09-10 2253
<el-date-picker v-model="value1" type="daterange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" > &.
datePicker一个或多个日期组件，如何快捷选择多个日期（时间段）
最新发布
qq_42314621的博客
08-07 2226
【代码】datePicker一个或多个日期组件，如何快捷选择多个日期（时间段）
elementui 时间组件设置选择范围（禁用日期通过 disabledDate 设置）
m0_65274248的博客
09-14 1468
elementui 时间组件设置选择范围（禁用日期通过 disabledDate 设置）
antd日期选择框DatePicker设置只可以选中某几个特定日期
weixin_45559449的博客
03-06 1632
使用组件的disabledDate属性，来设置不可选择的日期。disabledDate接收一个函数， 函数入参是当前日期currentDate，返回值为布尔值，true代表当前日期不可选，false代表可选
elementui时间选择器控制可选时间范围
flying_chick的博客
04-20 1742
需求描述 控制可选时间范围 代码 //控制时间从3个月前的今日开始到昨天 pickerOptions:{ disabledDate(time) { let date =new Date() //获取当前时间 let month =date.getMonth()-3 //获取3个月前的月份的index(0是1月) let day = date.getDate() let threeMounthsBef
el-date-picker日期范围不能跨disabledDate选择
东逝水
08-03 3982
日历控件是我见过做复杂的组件了，当然除了富文本之外。很多日历组件在实现可选日期的时候都是大同小异的，要么提供一个enablexxx要么提供一个disabledxxx的函数，让使用者明确告诉它哪些日期是可用的。element中的日历控件也提供了这样一个属性disabledDate，它接收一个日期参数，返回true表示不可选择，否则是可以选择。 我们一般的处理方法是调用一个接口，后端告诉我们哪些是可选的哪些是不可选的，这样我们在disabledDate中通过查询日期是否在可选/不可选的列表中来返回。粗略看起来这
vue2.x+element-ui 选择面试时间(多选)
qq_36529240的博客
03-16 754
选择面试时间(每半小时自动插入)，不论上周和下周时间，统一都是当前半小时插入一行 比如时间00:00插入一行，时间 00:30插入一行，以此类推… 一、html 我用了是弹性和模型布局 基本样式可以看这里 <template> <div class="interview-time"> <div class="dis-flex justify-center"> <h2>候选人选择面试时间</h2> </div&g
element ui时间选择器选择多个不同时间段时比较时间是否重叠
soclear_的博客
03-03 768
将返回的中国标准时间格式的开始和结束时间转换成时间戳push进新的数组 this.getshiftList.data.forEach(v=>{ let start=new Date(v.dateValue[0]).getTime(); let end=new Date(v.dateValue[1]).getTime(); v.startTime=(v.dateValue[0]+'').slice(16,25); v.e
element日期选择器限制周末不可选
07-09
对于Element日期选择器限制周末不可选的需求，可以通过自定义日期选择器的禁用日期来实现。以下是一种实现方法： 1. 首先，你需要在日期选择器中设置一个自定义的禁用函数，该函数将根据特定规则来禁用日期。在该函数中，你可以判断日期是否为周末，如果是则返回true，否则返回false。 2. 在日期选择器的配置项中，将该禁用函数作为disabledDate属性的值传入。 下面是一个示例代码，展示了如何使用Element日期选择器，并限制周末不可选： ``` <template> <el-date-picker v-model="selectedDate" :disabled-date="disableWeekends" ></el-date-picker> </template> <script> export default { data() { return { selectedDate: null }; }, methods: { disableWeekends(date) { // 判断日期是否为周末（周六和周日） const day = date.getDay(); return day === 0 || day === 6; } } }; </script> ``` 在上述示例中，`disableWeekends` 方法用于判断日期是否为周末，如果是则禁用该日期。 请注意，这里的示例使用的是Element UI的日期选择器，具体的实现可能会因你所使用的UI库或框架而有所不同。你需要根据自己的具体情况进行相应的调整。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值