【element-ui】el-date-picker 之picker-options时间选择区间禁用效果的实现

最新推荐文章于 2024-04-01 20:01:21 发布
最新推荐文章于 2024-04-01 20:01:21 发布
阅读量1k 收藏
点赞数
分类专栏： element-ui 文章标签： ui vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/angela_zhaoBei/article/details/132847558
版权

element-ui 时间选择器的时间区间禁用dom层引入:picker-option

<el-date-picker
    v-model="searchFormObj.workTime"
    clearable
    value-formate="yyyy-MM-dd"
    :picker-options="pickerOptions"
    placeholder="请选择时间"
>

</el-date-picker>

在return里添加pickerOptions

pickerOptions:{

        disabledDate(time){

                return(

                        time.getTime() < Date.now() - 8.64e7 * 15 ||

                        time.getTime() > Date.now()

                )

        }

}

效果如图：

小墨鱼_z
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-date-picker 英文改中文.doc
11-18
https://blog.csdn.net/xuelang532777032/article/details/121287203,内有博客截图，方便没有vip的小伙伴下载
vue element el-date-picker picker-options实现特定日期范围内可选择disabledDate
Hello_oll的博客
01-21 4652
官方文档给出的示例： <el-date-picker v-model="value2" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions"> </el-date-picker> 这是禁用当天之后的时间不可选择（disabledDate中，time.getTime() 的范围是禁用的时间范围） export default { data() {
【ElementUI】详细分析DatePicker 日期选择器
最新发布
码农研究僧的博客
04-01 2480
实战结合Element官网的心得体会
Element-UI:el-date-picker里的picker-options——用来限制选择日期的范围
xwh19961210的博客
03-05 9851
前言 在写项目点过程中遇到这样的需求：日期选择范围不得超过一年 提示：以下是本篇文章正文内容，下面案例可供参考 一、el-date-picker el-date-picker是element UI中的日期选择器组件，主要用来选择日期时间，有的时候需要对日期选择的范围有所限制，例如：日期选择范围不能超过一个月，可以通过picker-options进行控制。 官方文档：https://element.eleme.cn/#/zh-CN/component/date-picker 二、使用 1.组件 代码如下（
element 日期选择图标_element-ui日期组件DatePicker设置日期选择范围Picker Options
weixin_33372672的博客
01-14 1658
element-UI提供了DatePicker日期选择器组件,可以让我们很方便的获取到日期,默认的选择是全部的日期都可以选择的,但是很多场景中我们要对日期选择范围做限定,比如出行日期就不能选过去的日期,订票时间要限制日期范围官网提供了picker-options参数可以设置日期选择范围,具体操作看代码// 页面引入组件, 加上picker-options这个参数v-model="exCheckDa...
时间控件el-date-picker限制可选当前日期前七天
weixin_39547000的博客
09-10 1828
<el-date-picker v-model="value1" type="daterange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" > &.
el-date-picker组件的picker-options常规属性设置
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
07-17 1946
【代码】el-date-picker组件的picker-options常规属性设置。
vue element-ui el-date-picker限制选择时间为当天之前的代码
10-16
主要介绍了vue element-ui el-date-picker如何限制选择时间为当天之前,文中给大家提供了代码段和截图，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
date-picker_date-picker_时间选择_
10-02
时间选择器，可以选择时间段内的时间，有效提高jsp代码
vue-ctk-date-time-picker:VueJS组件选择日期和时间，包括范围模式
04-13
查找v1文档暗模式演示版安装纱yarn add vue-ctk-date-time-picker NPM npm i --save vue-ctk-date-time-picker用法ES6模块/ CommonJS import VueCtkDateTimePicker from 'vue-ctk-date-time-picker' ;import 'vue-...
解决Element中el-date-picker组件不回填的情况
01-21
因此我们在新建活动的操作过程中需要选择一段时间区间以及活动名称等信息提交，新建完成； 网页上出现了新建好的活动，其他人想查看详细信息，打开页面，发现时间区间并没有实现回填！ 2.问题分析 时间信息没有回填...
element日期时间选择器picker-options
---
04-22 2134
后台请求得到的数据 需要对数据进行处理，如下： <template slot-scope="scope"> <span>{{gmtStartEvent(scope.row.gmtStart)}}</span> </template> gmtStartEvent(oitem){ let myDate = new Date(oitem); let year = (myDate.getFullYear()).toString().padStart(2,
【element】element-ui时间日期设置范围pickerOptions
jieweiwujie的博客
08-16 988
<template> <divclass="home"> <el-date-picker v-model="pickerValue" type="monthrange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" :pic...
el-date-picker设置时间可选范围 :picker-options=““
qq_30306717的博客
03-22 2882
我这里用了momentjs，只能选择当前年的日期，且最大选择日期是当天，不能选择未来 pickerOptions: { disabledDate(time) { return time.getTime() > new Date(moment().format("YYYY-MM-DD") + " 23:59:59") } }, eg. <el-date-picker v-model="queryFields.statisticsDate" type="datera...
elementui日期组件自定义日期选项picker-options
qq_26311665的博客
03-05 5290
elementui日期组件自定义日期选项picker-options
el-date-picker中picker-options踩坑
qq_34196357的博客
07-04 597
原因是使用=赋值，会修改formData数据存储地址，导致picker-options中使用的formData根据初始地址查找，得到初始化的formData.starDate数据，而重新选择了日期后，重新选择的日期数据存储到了新地址，导致picker-options失效。进行初始化，则此问题可解决。表单控件中，对日期进行限制：开始日期不能大于结束日期，结束日期不能小于开始日期;此处使用**=**对表单数据对象进行重新赋空值，导致日期的限制不能根据所选择日期进行限制，只会根据初始化的日期进行限制。
ElementUI :picker-options 限制结束时间不能大于开始时间（亲测有效）
热门推荐
zhangkeke_的博客
09-09 2万+
一：如图：延期的时间不能大于原销售日期 利用elementUi 的el-date-picker标签属性：picker-options 二：代码如下 <el-date-picker placeholder="选择日期" :picker-options="pickerOptions" ty...
el-date-picker picker-options 时间限制 用法
weixin_44690121的博客
03-04 3513
el-date-picker的时间限制picker-options 1.在el-date-picker组件上写上动态属性 :picker-options=" "如下 2.在data里写动态属性所添加的内容 data(){ return { pickerOptions: this.limitTime(), } } 可以直接将方法写在数据data里，也可以写一个诸如上面的this.limitTime()调用 3.写禁用的方法 limitTime() { ret
element中的el-date-picker组件，设置禁止选择时间范围
weixin_67140738的博客
10-27 447
【代码】element中的el-date-picker组件，设置禁止选择时间范围。
element-ui el-date-picker 如何设置 daterange 的日期格式
07-12
对于 element-ui 的 el-date-picker 组件来说，要设置 daterange 的日期格式，可以通过设置 picker-options 属性来实现。具体步骤如下： 1. 在 el-date-picker 组件上添加 picker-options 属性，值为一个对象。 ```html <el-date-picker v-model="dateRange" type="daterange" :picker-options="pickerOptions" ></el-date-picker> ``` 2. 在组件的 data 中定义 pickerOptions 对象，设置其属性 disabledDate 和 shortcuts。 ```javascript data() { return { dateRange: [], // 存储选择的日期范围 pickerOptions: { disabledDate(time) { // 自定义禁用日期的逻辑，可根据需求进行修改 return time.getTime() > Date.now(); }, shortcuts: [ { text: '最近一周', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); picker.$emit('pick', [start, end]); } }, { text: '最近一个月', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); picker.$emit('pick', [start, end]); } } ] } }; } ``` 在以上代码中，disabledDate 函数用于自定义禁用日期的逻辑，可以根据需求进行修改。shortcuts 属性用于设置快捷选项，通过 onClick 函数设置快捷选项的点击事件逻辑。 通过以上步骤，即可设置 el-date-picker 组件的 daterange 的日期格式以及其他相关配置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值