Element-UI DatePicker 禁用0点之后时间

禁用未来日期选择

最新推荐文章于 2023-03-25 23:30:00 发布

原创最新推荐文章于 2023-03-25 23:30:00 发布 · 310 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #chrome

vuejs 同时被 2 个专栏收录

1 篇文章

订阅专栏

elementui

1 篇文章

订阅专栏

本文介绍了一种在日期选择器中禁用未来日期的方法，通过比较当前时间和所选时间来实现。具体实现中，获取明天的日期作为边界，确保用户只能选择今天的日期或之前的时间。

pickerOptions: {
     disabledDate(date) {
       const tomorrow = new Date(
         new Date().getFullYear(),
         new Date().getMonth(),
         new Date().getDate() + 1,
         0,
         0,
         0
       ).getTime();

       return date && date.getTime() >=  tomorrow;

      defaultTime: ["00:00:00", "23:59:59"],

这样就能把0点包括0点以后时间禁用，撒💐

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

玉順

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Element-UI的DatePicker禁用日期选择（type=date/daterange）

sleepwalker_1992的专栏

03-25

5394

Element-UI的el-date-picker禁用日期选择：禁用今天之前的日期选择、禁用今天之后的日期选择、限制选择日期范围

element-ui DatePicker 日期选择器动态添加日期限制范围

qq_36437172的博客

09-20

1万+

使用场景：我们在选择时间时，我们可能会需要限制条件，限制时间的可选范围，因此我们需要动态添加限制范围。 element-ui 中，提供 picker-options 对当前时间日期选择器特有的选项配置。值得注意的是，picker-options 的是一个 object 属性。 picker-options 当前时间日期选择器特有的选项参考下表 object — {} 更多细节，请参考案例：element-ui form 日期选择器限制选择范围。我们在picker-opt.

参与评论您还未登录，请先登录后发表或查看评论

Element-UI的DateTimePicker禁用日期时间选择(type=datetime)

sleepwalker_1992的专栏

03-25

3875

Element-UI的DateTimePicker禁用日期时间选择: type="datetime" 禁用当前时刻之前的日期时间选择、禁用当前时刻之后的日期时间选择

element el-time-picker 时间段动态禁用禁用时间段

xiaoheisboy的博客

06-06

5511

element el-time-picker 时间段动态禁用禁用时间段 // value-format 时间格式 //picker-options 绑定禁用时间段 // 需要默认值 <el-time-picker value-format="HH:mm:ss" v-model="TimeHour":picker-options="{ selectableRange:DisApplyTimeHours }" placeholder="时间点"> </el-time-picker>

elementUI 日期选择器datepicker 设置禁用日期

crazybai0001的博客

09-04

4689

经过上述分析可知_this.yearsArr.includes(year)的功能就是用日期选择器中的每个日期和[2021, 2022, 2023]匹配，如果日期选择器的某个日期存在于[2021, 2022, 2023]中，则返回true（此时这个日期显示为禁用状态），如果日期选择器的某个日期在[2021, 2022, 2023]中不存在，则返回false（此时日期选择器中的这个日期显示可用状态）。disabledDate(time)的参数item表示日期选择器中的生个日期（其值是日期型数据），

element ui 时间日期选择器控制从00:00:00-23:59:59

m0_58565372的博客

05-25

3727

<div class="block"> <span class="demonstration">默认</span> <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-t..

element-ui 限制日期选择的方法(datepicker)

08-27

Element-UI 日期选择器提供了多种类型的日期选择器，如日期选择器、日期时间选择器、日期范围选择器等。在这里，我们将使用日期选择器来演示限制日期选择的方法。在上面的示例代码中，我们使用了两个日期选择器，...

vue element-ui el-date-picker限制选择时间为当天之前的代码

10-16

首先，`el-date-picker`组件是Element UI中用于选择日期的组件，它可以被配置为单一日期、日期范围、日期时间等多种类型。在实际应用中，可以通过`v-model`指令与Vue组件的data属性进行双向绑定，从而在组件中获取...

element -- datepicker 设置可选范围

Dark_programmer的博客

12-13

3914

关于elementUI插件，使用起来是很方便，但是有时候产品的需求导致需要自定义一些配置参数。就比如：日期选择框设置选择范围为 2021-11-30 之后的日期为可选择，之前的为禁用状态添加宽街配置项：今日、昨日实现之后的效果如下：红色框里是无法选择的，就算往前翻到11月也是无法选择代码： <template> <el-date-picker v-model="searchDate" type="daterange"

element-ui - 日期选择器el-date-picker 设置禁止选择日期

nunumaymax的博客

08-19

9842

使用日期选择器时，有的时候需要禁止选择一些日期，我们可以通过快捷选项。对象中的禁用日期属性。

【ElementUI】DatePicker 日期选择器设置禁用日期范围

Maximus_ckp的博客

03-08

4619

<el-form-item label="活动时间:"> <el-date-picker v-model="form.startTime" type="datetime" placeholder="开始时间" align="right" @change="dataSearch" value-format="yyyy-MM-dd HH:mm:ss" format="

element-ui DateTimePicker 日期选择日期禁用

大白的博客

10-16

3348

日期区间选择器，当开始时间变化，就将之前的日期禁用，结束日期变化，就将此日期之后的禁用，效果如图主要用到的参数 picker-options 当前时间日期选择器特有的选项参考下表 <template> <el-form ref="form" :rules="rules" :model="form" :label-width="180px" class="form-style"> <div class="form-group...

el-date-picker如何设置禁用日期时间

最新发布

09-16

<think> 嗯，用户询问的是element-ui 2.15.6版本相关信息，结合提供的引用资料来看确实有这个需求。用户之前提到过"vue2对应的nodejs vuecli element ui版本"，还给出了具体的使用代码片段，说明用户正在使用Element UI进行实际项目开发。用户提供的几个引用很有意思。引用[1]和[2]都展示了Element UI在Vue项目中的典型引入方式，特别是引用[2]还结合了Cesium地理库的使用场景，这说明用户可能在开发地理信息系统类的应用。引用[3]提到版本升级和生产部署策略，暗示用户可能也关心升级迁移的问题。注意到用户特别强调版本号2.15.6，这应该是项目当前使用的固定版本，用户需要具体指导而非最新版信息。我应当重点整理这个特定版本的关键信息： - 首先要确认发布时间，2.15.6是2021年10月的patch版本，属于Element UI 2.x的后期版本 - 兼容性方面必须强调它仅支持Vue2，如果用户项目升级到Vue3就需要切到Element Plus - 安全问题很重要，这个版本修复了CVE-2021-21322原型链污染漏洞 - 值得提几个典型bug修复，比如DatePicker组件禁用日期失效问题，用户可能在日期选择功能上踩坑 - 文档资源要给官方GitHub的Release链接，用户可能需要查看完整的commit记录用户给出的代码片段显示使用了Webpack导入方式，但实际使用中可能遇到按需加载问题，这部分优化建议应该给出具体操作路径。考虑到用户项目可能涉及地图集成（引用[2]），要特别说明兼容性验证情况。最后考虑设置相关问题引导： 1. 升级迁移类问题是必要的，用户迟早要面对Vue3迁移 2. 特定组件的版本适配问题很实用，比如用户可能遇到表格组件的兼容问题 3. 性能优化方向作为高阶补充 4. 安全漏洞详情需要单独说明，用户可能没注意到这个风险点 </think> 以下是 Element UI 2.15.6 版本的核心信息及使用指南，综合版本特性和引用内容整理： ### 一、版本关键信息 1. **发布时间** `2.15.6` 发布于 **2021年10月**，是 2.x 的最终稳定版本（后续仅修复安全漏洞）。 2. **兼容性**（基于引用 [1][2]） - ✅ **Vue 2.x**：需搭配 `vue@^2.6.0` - ✅ **Node.js**：建议 `v12.x` 或 `v14.x` - ✅ **Vue CLI**：支持 `v4.x`（如 `@vue/cli 4.5.x`） - **Vue 3**：不兼容，需迁移至 [Element Plus](https://element-plus.org/) 3. **安全修复** 修复了 `CVE-2021-21322` 原型链污染漏洞，**必须升级至 2.15.6+** 避免 XSS 攻击风险[^1]。 --- ### 二、项目集成示例（引用 [1][2] 优化） ```javascript // main.js import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; // 必需样式 import App from './App.vue'; Vue.use(ElementUI, { size: 'small' }); // 全局配置组件尺寸 new Vue({ el: '#app', render: h => h(App) }); ``` --- ### 三、重点注意事项 1. **按需引入优化** 使用 [babel-plugin-component](https://github.com/element-plus/babel-plugin-component) 减少体积： ```bash npm install babel-plugin-component -D ``` ```javascript // babel.config.js module.exports = { plugins: [ [ "component", { libraryName: "element-ui", styleLibraryName: "theme-chalk" } ] ] }; ``` 2. **常见问题** - **样式冲突**：确保 Element UI 的 CSS 在全局重置后引入（参考引用 [2] 的 `reset.css` 顺序） - **图标加载**：需单独安装 `@element-ui/icons` 包 - **生产部署**：遵循渐进升级策略（参考引用 [3]），避免全量替换 --- ### 四、升级建议 - **Vue 2 项目**：可长期使用 2.15.6（官方停止功能更新，仅维护安全补丁） - **Vue 3 迁移**：须切换到 [Element Plus 1.x](https://element-plus.org/)，API 存在破坏性变更 > 官方文档存档：https://element.eleme.io/2.15/#/zh-CN --- ###