vue+element 日期选择器 禁用属性

最新推荐文章于 2025-11-15 18:08:59 发布
原创 最新推荐文章于 2025-11-15 18:08:59 发布 · 3.9k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何使用Vue.js中的element-ui组件库的日期选择器组件，并通过设置picker-options属性来禁用特定日期的选择功能。

1、在日期选择器中设置禁用日期


2、代码

 <el-date-picker type="date"
            placeholder="请选择维护时间"
            :picker-options="pickerOptions0"
            v-model="maintenanceRecord.maintenanceDate"
            style="width: 100%;"
            :disabled="dialog.check.maintenanceIsCheck"
            @change="changeMaintenanceDate"></el-date-picker>
  • 其中属性:picker-options="pickerOptions0" 为禁用日期

pickerOptions0: {
		          disabledDate(time) {
		            return time.getTime() < (new Date(vue.equipment.purchaseDate).getTime());
		          }
		        },

  • getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。

vue+ElementUI日期选择器实现禁用多时间段
Anita的博客
06-06 3724
文章目录前言一、引入elementui1.npm下载插件2.引入elementUI2.1 全局引用2.2 按需引用，需要下载babel2.3引入ElementUI的日期选择器DatePicker二、实现多时间段禁用总结 前言 本文将讲解如何在vue中使用elementui的日期选择器，如何同时禁用多个时间段，以及终止日期不能选择起始日期之前的日期。这里以订房选择日期为例，效果如下。 1.选择起始日期（已被预订的日期不能选）: 2.选择终止日期（入住日期是6/11,则退房日期不能选11号之前）： 一、引
vue+Element 时间选择器 只有后台传回的数据可以点击，其他日期不能被点击
我要成为一个前端大牛
04-22 1128
写在前面：查了很久没有找到可以根据后台的数据对时间选择器作出限制，只能找到关于连续时间的限制。和要求不同，所以是自己写的，如果有什么问题可以提出来 <el-date-picker v-model="list.time" type="date" :editable=false value-format="yyyy-MM-dd" :picker-opti...
Element - 日期禁用集合（持续更新）
weixin_45938584的博客
06-02 304
当前日期之前的日期禁用 <el-date-picker v-model="form.startTime" type="date" placeholder="选择日期" :picker-options="pickerOptions"></el-date-picker> data(){ retutn{ pickerOptions: { disabledDate(time) { return time.getTime() < Dat
element ui 时间控件 今天之后的日期禁用
山外小楼
10-23 5654
主要用到了这个 属性picker-options html <el-date-picker v-model="timeData" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd HH:mm" value-form...
【亲测免费】 推荐：Vue2日期选择组件——vue2-datepicker
最新发布
gitblog_00021的博客
11-15 1979
在开发Web应用时，日期选择功能是必不可少的。今天，我想要向你推荐一个强大的Vue2日期选择组件——[vue2-datepicker](https://github.com/mengxiong10/vue2-datepicker)，它不仅易于使用，而且提供了丰富的定制选项。 ## 项目介绍 vue2-datepicker是一款专为Vue2框架设计的轻量级日期选择器，支持日期、时间、年份、月份等
elementUI 2.x：日期时间控件设置禁用日期
lalala_dxf的博客
12-05 2952
查看官网，可以看到有个叫做picker-options的组件属性，没错，就是借助他来完成禁用指定日期的操作 该属性值传入的是一个对象，对于时间选择器、日期选择器、日期时间选择器分别传入不同的配置值来设置禁用功能，咱们一个一个看时间选择器的属性picker-options属性可选的值如下： 功能如表格描述一样，咱写个小demo测试下就好了，不过要注意，时间选择器中只有el-timer-picker可以禁用指定时间范围之外的值，而el-timer-select只是设置取值范围，范围之外不显示。 日期选
elementUI日期选择器禁用功能
Leeyy
03-07 1114
/ 禁用今天之前的日期选择。// 禁用今天之后的日期选择。这次用到的是月份选择器，且需要对本月之前的选择都禁用掉。扩展一下，日期选择器应该如何禁用。
element ui 中日期选择器disabledDate的几种用法
hellowang02的博客
07-06 7719
element ui 中日期选择器disabledDate的几种用法
精选资源
基于vue+element的在线拖拽生成表单页面的可视化表单制作工具
11-04
1. **拖拽界面设计**：用户可以通过简单的拖放操作将各种Element UI组件（如输入框、选择器、日期选择器等）添加到表单页面，无需编写繁琐的HTML和CSS代码。 2. **实时属性设置**：工具允许开发者实时调整每个组件...
vue+element 模态框表格形式的可编辑表单实现
10-16
在Vue.js框架中，Element UI库提供了一套丰富的UI组件，其中包括模态框（Modal）和表格（Table），这些组件可以方便地构建出各种交互式的用户界面。在本例中，我们将探讨如何利用Vue和Element UI来实现一个模态框内...
Cat-Table-Select 基于Vue+Element的表格选择器
究极死胖兽的博客
08-24 3724
Cat-Table-Select 基于Vue+Element的表格选择器 基于 Element 的Vue 组件(Vue.js 2.x) cat-table-select Github 地址 前言 之前自己动手做了个基于Element树选择器 cat-tree-selec ，于是就照着之前的思路又封装了个表格选择器。目前已经实现了单选，多选，分页，自定义列，可搜索等功能。 效果预览 Demo 安装 复制仓库 bashgit clone git@github.com:scuxiatian/cat-ta
element 时间选择器通过 disabledDate 设置禁用日期
甜心的专栏
08-06 1万+
DatePicker 日期选择器 <template> <div> <el-date-picker v-model="productionDate" type="date" placeholder="选择出厂日期" :disabled-date="disabledDate"></el-date-picker> </div> </template> <script> export def
element ui时间选择器el-date-picker关于日期禁用disabledDate的使用
qq_39330397的博客
08-09 6496
发现始终不触发disabledDate，不会走进禁用的方法。寻思再三后，看官网介绍它并不是组件的Attributes。这时候我们过多选择的是elment ui里面的el-date-picker组件，但是又嫌弃人家原始的这个丑陋。个人推介第一个，符合我们日常的逻辑。
element-ui日期选择器disabledDate使用心得
qq_37899792的博客
06-27 8905
时期选择范围为当前时间以及当前时间之前 <template> <!-- 新增/修改进度计划 --> <div class="addPlan" id="subAdd"> <el-form :model="dataModel" :rules="rules" ref="addPlan" label-width="135px"> ...
el-date-picker如何设置disabled（picker-options）属性
qq_43258500的博客
05-27 7324
el-date-picker如何设置disabled（picker-options）属性 方法一 <el-date-picker format="yyyy-MM-dd" v-model="startTime" size="mini" @change="startToEnd(startTime,issue.guaranteePeriod)" :picker-options="pickerOptions"></el-date-picker> data() { return {
element 时间选择器通过 disabledDate 设置禁用日期及行内样式
weixin_45832746的博客
03-07 900
【代码】element 时间选择器通过 disabledDate 设置禁用日期及行内样式。
element-ui中日期选择器中日期是否可选控制 :disabled-date=“disabledDate“
weixin_49848930的博客
09-06 3436
<el-date-picker v-model="value2" type="date" placeholder="选择日期" :disabled-date="disabledDate" :shortcuts="shortcuts" > </el-date-picker> <script> import { defineComponent, reactive, toRefs }...
Element UI disableddate设置动态时间,时间段，或者当前之前不可选，当天之后不可选
热门推荐
qq_38057434的博客
06-05 2万+
在项目中使用Element UI 日历控件，本人遇到的场景是某个时间到当天时间可选，其他不可选，代码如下： dom: <el-date-picker v-model="ruleForm1.date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" :picker-o...
vue 使用 el-date-picker 动态设置 disabled-date
weixin_45482035的博客
03-09 6221
vue 使用 el-date-picker 动态设置 disabled-date
vue3+ element-plus 时间选择器禁用当月之后的月份
05-29
<think>嗯，用户想在Vue3和Element-Plus的时间选择器中禁用当前月之后的月份。首先，我需要回忆一下Element-Plus的日期选择器组件有哪些属性和方法。记得他们有一个disabled-date属性，可以用来禁用特定的日期。不过用户这次的需求是禁用整个月份，而不仅仅是单个日期。根据之前的引用，比如引用3中提到用disabled-date来禁用当天之后的日期，返回time.getTime() >Date.now()。但月份的话，可能需要比较月份和年份。因为如果当前是2023年10月，那么11月、12月以及之后年份的月份都应该被禁用。 所以，我需要先获取用户选择的日期的年份和月份，然后与当前的年份和月份进行比较。如果用户选择的年份大于当前年份，或者年份等于当前年份但月份大于当前月份，就返回true禁用该日期。不过这样可能只能禁用每个月的具体日期，而不是整个月。或者，是否有一种方法可以判断某个日期是否属于当前月之后的月份？可能需要遍历每个日期，检查它所属的月份是否在允许的范围内。例如，对于月份选择器，可能需要使用type="month"来切换到月份选择模式，这样禁用的逻辑会更直接。但用户可能使用的是日期范围选择器还是单独的月份选择器呢？ 根据用户的问题，他们可能使用的是月份选择器，所以应该设置type为month。然后，在disabled-date函数中，比较传入的日期对象的月份和年份。例如，如果传入的日期是2023年11月，而当前是2023年10月，那么应该禁用。如果传入的是2024年1月，也应该禁用。 具体实现的话，日期对象可能需要处理。比如，传入的time参数是一个Date对象，代表每个可选月份的起始日（比如每个月的第一天）。那么，可以提取该日期的年份和月份，和当前的年份和月份比较。如果年份大于当前年份，或者年份等于当前年份但月份大于当前月份，就禁用。另外，要注意时区的问题。Date.now()返回的是当前时间的毫秒数，可能会根据用户的时区有所不同，但一般来说，使用getFullYear()和getMonth()方法应该能正确获取当前本地时间的年份和月份。 测试一下，比如当前是2023年10月，传入一个日期是2023年10月1日，应该不禁用。如果是2023年11月1日，应该被禁用。2024年1月1日也应该被禁用。那代码的大致结构应该是这样的： constdisabledMonth= (time)=> {constcurrentYear= newDate().getFullYear();constcurrentMonth= newDate().getMonth();//0-11constselectedYear= time.getFullYear();const selectedMonth =time.getMonth();returnselectedYear> currentYear ||(selectedYear ===currentYear&& selectedMonth >currentMonth); };然后在el-date-picker中设置:disabled-date="disabledMonth"，并且type设置为month。不过用户可能希望使用月份选择器，所以组件的type应该是"month"，而不是"date"或者其他。例如：<el-date-pickerv-model="selectedMonth"type="month":disabled-date="disabledMonth"/>这样，当用户选择月份时，禁用的月份就会被正确应用。另外，需要确保time参数是每个月的第一天，比如当用户选择11月时，传入的time可能是2023-11-01，这样提取的月份就是10（因为getMonth()返回0-11）。这应该没问题。 可能还需要处理边界情况，比如当前月份是12月，那么下一年所有月份都应该被禁用。例如，当前是2023年12月，那么任何月份在2023年12月之后的，即2024年1月及以后，都应该被禁用。 综上，代码应该正确比较年份和月份，返回是否禁用。同时，组件的type要设置为month，以便显示月份选择器。</think>### 实现步骤 #### 1. 组件类型设置 使用 `type="month"` 的日期选择器，调整为月份选择模式： ```html <el-date-picker v-model="selectedMonth" type="month" :disabled-date="disabledMonth" placeholder="选择月份" /> ``` #### 2. 禁用逻辑实现 通过比较目标月份与当前月份的关系，动态禁用符合条件的月份： ```javascript const disabledMonth = (time) => { const current = new Date(); const currentYear = current.getFullYear(); const currentMonth = current.getMonth(); // 0-11 表示 1-12 月 const targetYear = time.getFullYear(); const targetMonth = time.getMonth(); // 目标年份大于当前年份 或 同一年但月份更大时禁用 return targetYear > currentYear || (targetYear === currentYear && targetMonth > currentMonth); }; ``` #### 3. 完整组件示例 ```html <template> <el-date-picker v-model="selectedMonth" type="month" :disabled-date="disabledMonth" placeholder="选择月份" format="YYYY-MM" value-format="YYYY-MM" /> </template> <script setup> import { ref } from 'vue'; const selectedMonth = ref(''); const disabledMonth = (time) => { const current = new Date(); const currentYear = current.getFullYear(); const currentMonth = current.getMonth(); const targetYear = time.getFullYear(); const targetMonth = time.getMonth(); return targetYear > currentYear || (targetYear === currentYear && targetMonth > currentMonth); }; </script> ``` ### 关键点说明 1. **时间精度处理**：`getMonth()` 返回 0-11，对应自然月 1-12 月[^3] 2. **动态比较逻辑**：通过年份和月份双重判断确保精确控制 3. **格式统一**：使用 `value-format` 规范数据格式
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值