ElementUI组件el-time-picker的使用(只显示小时,分钟)

2023-10-27

 在开发项目的时候,会经常用到时间选择器,但是ElementUI文档上给的示例是带有秒的。

下面就是实现只显示小时和分钟的代码。

    <el-form :model="formdata" style="margin-top: 30px;">
      <el-form-item class="edit-form-wrap">
        <el-time-picker
          v-model="formdata.starttime"
          placeholder="起始时间"
          :value-format="pickerFormatText"
          :format="pickerFormatText"
          :picker-options="{
            selectableRange: '08:00:00 - 23:59:00',
            format: pickerFormatText
          }"
          @change="changeTime"
        >
        </el-time-picker>
        <span>-</span>
        <el-time-picker
          v-model="formdata.endtime"
          placeholder="结束时间"
          :value-format="pickerFormatText"
          :format="pickerFormatText"
          :picker-options="{
            selectableRange: `${minPickerTime} - 23:59:00`,
            format: pickerFormatText
          }"
        >
        </el-time-picker>

      </el-form-item>
    </el-form>

data中的数据字段:

      // form数据
      formdata: {
        starttime: '',
        endtime: ''
      },
      minPickerTime: '08:00:00',
      pickerFormatText: 'HH:mm'

methods方法:


    changeTime(event) {
      this.minPickerTime = `${event}:00`
    },

效果:

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ElementUI组件el-time-picker的使用(只显示小时,分钟) 的相关文章

  • 如何获取对象的所有属性?

    如何在 JavaScript 中使用反射获取对象的所有属性 循环遍历对象并获取属于该对象且不属于该对象的每个键 一个函数 var properties for var key in obj if obj hasOwnProperty key
  • 自动调整Google网站嵌入代码的高度(html)

    我正在使用 Google 协作平台嵌入 HTML 代码 将代码粘贴到 从网络嵌入 窗口中 输出的长度是可变的 我希望有一种方法可以动态调整父级的高度iframeGoogle 协作平台用于托管我的 HTML 我知道我可以使用 Google 协
  • 跨域XMLHttp请求

    这是我的情况 我有一台 Web 服务器机器 一台客户端机器和第三台运行一些侦听 XMLHttpRequest 的程序的机器 客户端从客户端计算机访问网络服务器 进行一些更改 然后单击 保存 此时 数据被发送回网络服务器和第三台机器 所有这些
  • Javascript DOM setAttribute 在函数调用中不起作用

    我有一个带有输入元素的 HTML 文件 我希望向其中添加一个名为 valid fieldset011 的新属性 该属性用作 AngularJS 验证器的链接 输入元素具有属性 id fieldset011 如果我使用以下脚本 包含在脚本标签
  • 仅单击 div 内部

    我正在为一个小网站制作教程 我只想让教程气泡可点击 因此 当我们尝试单击气泡之外的某些内容时 什么也不会发生 换句话说 我希望我的 html 不可点击 而 tutorial bubble 可点击 尝试这个 jQuery function h
  • 如何防止 gulp-notify 破坏 Windows 中的 gulp-watch?

    我正在使用吞咽通知 https www npmjs org package gulp notify插入 这是我如何在 gulpfile js 中实现它的示例 您可以看到我也在使用 gutil 和 livereload 我不知道它们是否发挥任
  • window.onbeforeunload 在 Android Chrome 上不会触发 [alt.解决方案?]

    我开发了一个简单的聊天应用程序 我正在使用 window onbeforeunload当有人关闭选项卡 浏览器时 基本上是当用户离开房间时 通知其他用户 这是我的代码 scope onExit function scope chatstat
  • javascript jquery 使用脚本更改脚本的src

    我有一个 JavaScript 脚本 它有一个 src 元素 这个 src 是一个 url 我想使用 javascript 更改它 一次更改为其他内容 或者动态创建它 使用 javascript jquery 动态创建脚本元素的最佳方法是什
  • 如何动态突出显示网页上的字符串?

    我想创建带有 url 的页面 例如 http xyzcorp schedules 2015Aug24 Aug28 Jim Hawkins http xyzcorp schedules 2015Aug24 Aug28 Billy Bones
  • 搜索深度嵌套数组以更新对象

    我有一个深层嵌套的数据结构 我有兴趣匹配数组 和数组数组 中的某个值 然后将一些数据推送到随附的数组中 例如以下是我的数组colors并伴随着的是更多颜色数组可能存在也可能不存在 var myData color green moreCol
  • 如何用javascript正确读取php cookies

    考虑这个 php 和 javascript 代码 然后我在控制台中看到的是 utma 111872281 291759993 1444771465 1445374822 1445436904 4 utmz 111872281 1444771
  • 在 jQuery 可排序中对多个选定项目进行排序?

    我试图在 jQuery 可排序集中选择多个项目 然后将选定的项目一起移动 这是我的弱点开始尝试使其发挥作用 http jsfiddle net benstenson CgD8Y 这是代码 HTML div class container d
  • 了解 JavaScript - 资源

    使用 StackOverflow 的微型 Digit Blog 功能进行描述here https stackoverflow com about 我想发布以下我刚刚看到的 我觉得很有趣的谷歌技术谈话视频 我一直在理解 javascript
  • 为什么 Web Worker 性能在 30 秒后急剧下降?

    我正在尝试提高在网络工作人员中执行时脚本的性能 它旨在解析浏览器中的大型文本文件而不会崩溃 一切都运行得很好 但我注意到使用网络工作者时大文件的性能存在严重差异 于是我做了一个简单的实验 我在同一输入上运行脚本两次 第一次运行在页面的主线程
  • Google 地图 API:忽略 DirectionService 请求中的季节性限制

    我目前正在开发一张地图 其中显示两点之间的最短路线 使用不同的交通工具 我注意到 有时 例如在冬季关闭的道路不会被考虑在内 我发现我可以使用方向服务 下面的代码 忽略高速公路 收费站和渡轮 但我一生都无法弄清楚如何 是否可以忽略季节性限制
  • 如何检测元素内容何时发生变化

    我正在寻找一种方法来监视元素内动态填充 无页面重新加载 内容 以便我可以将类添加到另一个元素 到目前为止我有这个 HTML div class message container div class messages error span
  • Node.js 未处理的“错误”事件

    我编写了一个简单的代码并将其保存在文件 try js 中 var http require http var makeRequest function message var options host localhost port 8080
  • Ember Data 中出现“超出最大调用堆栈大小”错误的原因可能是什么?

    Ember 发布新版本 3 6 0 后 我开始在控制台中收到错误 rsvp js 24 未捕获 RangeError 超出最大调用堆栈大小 在 WeakMap get 在 getCacheFor metal js 25 在 Computed
  • 如何使用 jQuery 或 JavaScript 聚焦 或 标签?

    for var i 0 i
  • 将 RequireJS 与遗留代码结合使用

    我正在处理一个非常大的项目 该项目使用 包含带有脚本标记的 javascript 文件的旧版 JSP 页面 使用其他 javascript 模块而不使用 RequireJS 的骨干模型和视图 现在 我们希望开始将 RequireJS 与 j

随机推荐

  • 超好用的webssh(支持秘钥登录)

    webssh 项目地址 https github com billchurch WebSSH2 安装 webssh cd usr local git clone https github com billchurch WebSSH2 git
  • 调用其他文件的define_DEFINE_PROFILE用法介绍(1)

    01 概述 可以使用DEFINE PROFILE定义一个自定义边界配置文件或单元格区域条件 该条件随空间坐标或时间而变化 可以自定义的变量如下 速度 压力 温度 湍流动能 湍流耗散率 质量流量 目标质量流量作为流动时间的函数 物种质量分数
  • 新春特辑

    志在哪里 哪里就有成功 心在哪里 哪里就有风景 爱在哪里 哪里就有感动 在新年来临之际 互联互通社区衷心祝愿您 春节快乐 身体健康 心想事成 1 中国非结构化数据中台实践白皮书 2 2020中国服装行业数据中台研究报告 3 2020中国数据
  • Java嵌套if选择结构

    嵌套if选择结构本期用两个例题来讲解 例题1 学校举行运动会 百米赛跑成绩在12s内有资格进入决赛 否则淘汰 进入决赛再根据性别来区别进入男子组决赛和女子组决赛 public static void main String args Sca
  • 区块链学习3:区块链的共识机制

    前往老猿Python博文目录 共识机制主要用于解决分布式计算的根本问题数据的一致性 所谓共识 简单理解就是指参与方都达成一致 在区块链系统中 如何让每个节点通过一个规则将各自的数据保持一致是一个很核心的问题 这个问题的解决方案就是制定一套共
  • Python 写函数,传入一个参数n,返回n的阶乘

    def factorial n param n 参数 return 返回结果 if n lt 0 exit sum 1 for i in range 1 n 1 sum i print sum return factorial 8
  • 分享8个超神的Pycharm插件们,可以说是无敌的存在!

    分享几个YYDS的Pycharm插件 1statics staitcs可以作为KPI摸鱼好助手 120w次下载的这个插件 可以直接统计代码的具体情况 对工程里的每个代码文件进行统计代码量 空行量 注释量 代码行占比等进行清晰统计 下次就算功
  • centos7 nodejs 启动vue项目

    1 准备项目文件及目录 2 检查nodejs 环境 3 安装vue cli脚手架构建工具 命令 npm install g vue cli 4 切换项目目录 运行初始化命令 切换命令 cd projects DDSWeb 初始化命令 vue
  • STM32F1端口复用与重映射(学习心得)

    端口的复用 以USART1为例 PA9管脚的复用功能为 USART1 TX 串口发送端 PA10管脚的复用功能为USART1 RX 串口接收端 对端口复用的配置 GPIO端口的时钟使能 RCC APB2PeriphClockCmd RCC
  • C语言编程必将成为通用技能

    正文 为什么我们要学习编程 编程是当今时代不可或缺的核心技能 它不仅仅是程序员的专属领域 而是逐渐成为一种通用技能 被越来越多的人所需 想象一下 不久的将来 编程将变成人人都会的事情 而职业编程人员会逐渐减少 就像识字一样 编程将成为人们必
  • 用Java实现分页

    查询完全表之后 接下来要做的是查询总条数 和当前是第几页 总共有几页 包括数据 通过Java思想将封装为类 然后调用 pageBean java类可以当做通用的分页的类 Service作用是封装一类服务 比如说注册或者说登录 它是一类服务
  • IMS中Binder案例

    IMS中Binder案例 1 FWK层中AIDL形式 1 1 服务端实现Stub 1 2 客户端获取proxy 2 Native层中AIDL形式 2 1 服务端对应Bn端 2 2 客户端对应Bp端 android12 release 1 F
  • C++指针的使用

    一 指针的定义和使用 可以通过指针来保存一个变量的地址 例如 int a 2 就相当于内存中分出了一个内存块给变量a 而这个内存块中储存的数值为2 假设这个内存块的地址为0x2e 则可以通过定义一个指针来储存这个地址0x2e 指针就是一个地
  • Qt GraphicsView图形视图框架(Graphics View Framework)

    Graphics View提供了一个surface 用于管理大量定制的2D图形项并与之交互 还提供了一个View小部件 用于可视化项目 并支持缩放和旋转 该框架包含一个事件传播框架 该架构允许对场景中的项目提供精确的双精度交互功能 项目可以
  • IP地址总结

    IP地址分类 IP地址的编码分为两部分 网络号和主机号 A类地址默认子网掩码 255 0 0 0 B类地址默认子网掩码 255 255 0 0 C类地址默认子网掩码 255 255 255 0 D类默认子网掩码 255 255 255 25
  • 数学实验-迭代(Mathematica实现)

    一 实验名称 迭代 二 实验环境 Mathematica 10 3软件 三 实验目的 本实验通过Mathematica 10 3软件利用迭代求解方程的近似解 了解迭代方法在解决问题的收敛速度的异同 认识到函数的迭代是数学研究中的一个非常重要
  • P2P和CS架构

    P2P架构 Peer to Peer 特点 1 没有服务器 2 任意端系统直接通信 3 节点阶段性接入internet 4 节点可能更换ip地址 优缺点 优点 动态和随机性 缺点 难以管理 P2P和CS进行文件分发的比较 当文件数增多时 P
  • CSAPP阅读笔记——第二章:信息的表示和处理

    核心内容 编码原则 无符号 补码 浮点 溢出 无符号 补码 精度 浮点 一 信息存储 字节 存储最小单元 程序的内存管理是在虚拟地址层面上 字长 用于指明整数和指针数据的大小 编码虚拟地址 决定虚拟地址空间大小 数据大小 编码数字的格式 其
  • 【LLMs】关于LLMs的语义搜索

    大家好 我是Sonhhxg 柒 希望你看完之后 能对你有所帮助 不足请指正 共同学习交流 个人主页 Sonhhxg 柒的博客 CSDN博客 欢迎各位 点赞 收藏 留言 系列专栏 机器学习 ML 自然语言处理 NLP 深度学习 DL fore
  • ElementUI组件el-time-picker的使用(只显示小时,分钟)

    在开发项目的时候 会经常用到时间选择器 但是ElementUI文档上给的示例是带有秒的 下面就是实现只显示小时和分钟的代码