首页 > 其他分享 >el-date-picker选择时间只能选择到分

el-date-picker选择时间只能选择到分

时间:2024-05-16 13:52:14浏览次数:19  
标签:picker el arr yyyy 选择 date

说明

要求el-date-picker选择日期时间时,只允许选择到分,并且分的step=5,即只能选择0、5、10、15、...

实现要点
  • 通过value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"控制只选择到分
  • 通过:disabled-minutes="disabledMinutes"禁用某些分钟,并且通过css样式将这些禁用的分钟数设置隐藏
代码
// template
<el-date-picker
    type="datetime"
    v-model="noticeForm.publishTime"
    placeholder="请选择日期时间"
    format="YYYY-MM-DD HH:mm"
    data-format="YYYY-MM-DD HH:mm"
    value-format="YYYY-MM-DD HH:mm:ss"
    :disabled-minutes="disabledMinutes"
    :editable="false"
/>
          
// script
const disabledMinutes = () => {
  let arr = [];
  for (let i = 0; i < 60; i++) {
    if (i % 5 !== 0) {
      arr.push(i);
    }
  }
  return arr;
};

//scss
<style lang="scss">
.el-time-spinner__item.is-disabled {
  display: none;
}
</style>

 

 

标签:picker,el,arr,yyyy,选择,date
From: https://www.cnblogs.com/nicoz/p/18195835

相关文章

  • thymeleaf模版引擎
    什么是模版引擎?模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。Thymeleaf介绍Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎。Thymeleaf的主要目标是为您的开发工作流程带......
  • 此主机支持Intel VT-x,但Intel VT-v 处于禁用状态
     此主机支持IntelVT-x,但IntelVT-x处于禁用状态。1.首先,需要解释一下“BIOS”2.解决办法2.1进入计算机BIOS界面3.成功启动虚拟机在VMwareWorkstation中,配置完Linux虚拟机后,运行该虚拟机的时候,报了这个错误,如下图。 1.首先,需要解释一下“BIOS”  BIOS是英文"BasicIn......
  • 使用 PHP 创建 Excel 读取器类
    介绍:PHPExcel-1.8.1读取excel创建ExcelReader类:ExcelReader类旨在从Excel文件中读取数据。它以文件路径作为输入,并提供一个方法来从Excel文件中读取数据。<?phprequire_once"lib/PHPExcel-1.8.1/Classes/PHPExcel.php";classExcelReader{protected$file;......
  • vue3 elementplus样式
    科技感日期选择器样式.data_screen.el-picker-panel__footer{color:#87CEEB;background:#00122a;border-top:1pxsolid#274954;}.data_screen.el-picker-panel{color:#87CEEB;background:#00122a;border:1pxsolid#274954;}.data_screen.el-picker-pane......
  • ElasticSearch (ES从入门到精通一篇就够了)
    ES分布式搜索引擎注意:在没有创建库的时候搜索,ES会创建一个库并自动创建该字段并且设置为String类型也就是text什么是elasticsearch?一个开源的分布式搜索引擎,可以用来实现搜索、日志统计、分析、系统监控等功能什么是elasticstack(ELK)?是以elasticsearch为核心的技术栈,包......
  • 首次尝试SeaTunnel同步Doris至Hive?这些坑你不能不避
    笔者使用SeaTunnel2.3.2版本将Doris数据同步到Hive(cdh-6.3.2)首次运行时有如下报错,并附上报错的解决方案:java.lang.NoClassDefFoundError:org/apache/hadoop/hive/metastore/api/MetaExceptionjava.lang.NoClassDefFoundError:org/apache/thrift/TBasejava.lang.NoClassDe......
  • shell 语法简记
    shellexpr运算在Shell脚本中,[expr](){"sa":"re_dqa_zy","icon":1}命令用于进行数学运算和字符串操作。以下是一些使用expr进行运算的示例:12整数运算:加法:expr10+10 返回20减法:expr1500-900 返回600乘法:expr30*3 返回90除法:expr30......
  • ElasticSearch系列---【备份或重命名索引】
    备份或重命名1.问题描述我们原有的索引main-data-202403,字段不足,需要新加入字段,原有索引不用了,但怕后面业务又需要这些数,所以我们需要新建一个索引bak-main-data-202403,把main-data-202403迁移过去,删除原索引main-data-202403,再新建加入了新字段的同名索引main-data-202403,其......
  • 接口自动化测试框架【python+requests+pytest+excel+allure+jenkins】
    一.在整个框架中需要用到哪些东西?1.python环境安装https://www.python.org/downloads/windows/下载解压后直接安装,选择Addpythontopath2.JAVA环境配置安装包下载地址:https://www.oracle.com/java/technologies/downloads/环境变量设置参数如下:●变量名:JAVA_HOME●变......
  • D. Deleting Divisors
    https://codeforces.com/contest/1537/problem/D题意:给定数n,alice和bob博弈,alice先手。每次操作可以减去当前n的一个因子,并且该因子不能为n和1。问谁必胜。思路:策略分析。基础分析:如果n是奇数,那么没有偶数因子。如果n是偶数,可能有偶数因子和奇数因子,如果只有偶数因子,n是2的整数......