element-UI组件之日期时间选择器与时间格式转化
element-UI组件之日期时间选择器与时间格式转化
- 日期选择器与时间选择器的一般使用
- 日期时间选择器
- 选择日期时间点
- 选择日期范围
- 日期选择器
- 月份范围选择器
- 禁选日期
- 用time.getTime()进行日期(时间)格式的转换
- 时间选择器
- el-time-select选择固定时间点
- el-time-picker选择任意时间点
- 禁选时间==>>可选时间段
- 时间格式转换
- 跟时间有关的函数
- 获取当前时间
- 区时格式时间转化为时间戳
- 区时格式时间转化为一般时间格式
- 方法一,分别获取年月日时分秒,然后拼接
- 方法二,用`.toLocaleString()`方法转化
- 时间戳转化为一般时间格式
- 选择器返回的时间格式与转换方法
- 在什么时候需要注意使用格式转换
日期选择器与时间选择器的一般使用
element-ui中关于时间选择的组件一共有三个,时间选择器、日期选择器以及时间日期选择器,即可选择时间,可选择日期以及日期和时间都能选择。
日期时间选择器
先看element-ui的日期时间选择器组件能满足哪些功能需求,官网地址为element-ui日期时间选择器:https://element.eleme.cn/#/zh-CN/component/datetime-picker
顾名思义,日期时间选择器就是即可以选择日期也可以选择时间的组件。
选择日期时间上,有选择时间点和时间段两种功能,通过修改type
属性值实现:
选择日期时间点
<el-date-pickerv-model="value2"type="datetime"placeholder="选择日期时间"align="right":picker-options="pickerOptions"></el-date-picker><!--:picker-options="pickerOptions"中是快捷键时间选择type值为datetime,type="datetime"
-->
其中type值为datetime,type=“datetime”
:picker-options="pickerOptions"中是快捷键时间选择,如下:
export default {data() {return {pickerOptions: {shortcuts: [{text: '今天',onClick(picker) {picker.$emit('pick', new Date());}}, {text: '昨天',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24);picker.$emit('pick', date);}}, {text: '一周前',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);picker.$emit('pick', date);}}]},}}
选择日期范围
<el-date-pickerv-model="value1"type="datetimerange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker>
<!--此时间范围选择器的组件type属性为"datetimerange"-->
日期选择器
日期选择器:https://element.eleme.cn/#/zh-CN/component/date-picker
日期选择器组件的标签也是<el-date-picker></el-date-picker>
,所以它们的type属性可选值也相同,有:year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange , 其中如果是带有range的值,则表示用来选择某种时间范围。如令type=monthrange,使用月份范围选择器:
月份范围选择器
el-date-picker
还有一个常用的功能是日期禁用的属性disabledDate
,当待选的日期范围给定,或者最常见的,只能选择超过当前的日期或者只能选择当前日期之前的日期
禁选日期
如图所示,是禁用超过当前的日期,
页面组件代码如下:
<el-date-pickerv-model="value2"align="right"type="date"placeholder="选择日期":picker-options="pickerOptions"></el-date-picker>
日期禁用是写在:picker-options="pickerOptions"
的pickerOptions
中,它是一个对象,如下:
pickerOptions: {disabledDate(time) {return time.getTime() > Date.now();},},}}// 其中Date.now()命令获取的是当前时间。time.getTime()用于转换时间为时间戳格式
用time.getTime()进行日期(时间)格式的转换
其中Date.now()命令获取的是当前时间。time.getTime()用于将区时转换时间为时间戳格式。例如,我们在disabledDate()
函数中增加打印time
的命令: console.log('time=', time)
,如下
pickerOptions: {disabledDate (time) {console.log('time=', time)return time.getTime() > Date.now()}},
打印内容如下图所示,是每个日期的区时格式,时间都是00:00,为当天凌晨开始时间。
关于日期时间的格式,一共有三种,
时间戳(一个数字,表示从1970年1月1日0点到该时间点的毫秒数,单位是好眠)、
区时(如上图片中所打印的格式)以及
一般时间格式(日期之间短横相连,时分秒之间冒号隔开,中间空格分隔,如 2022-11-11 11:11:11)
在第二章再详细说明选择器选择的时间的格式,以及让它们相互转化的命令。
时间选择器
日期时间选择器和日期选择器组件的标签都使用el-date-picker
,但时间选择器则有两种标签,来满足两种共囊。一个是el-time-select
,选择固定时间点;一个是el-time-picker
,选择任意时间点。
el-time-select选择固定时间点
<el-time-selectv-model="value":picker-options="{start: '08:30',step: '00:15',end: '18:30'}"placeholder="选择时间">
</el-time-select>
<!--在picker-options中,确定开始时间start,结束时间end,以及步长step-->
el-time-select
标签,在picker-options
中,确定开始时间start
,结束时间end
,以及步长step
。
el-time-picker选择任意时间点
<el-time-pickerv-model="value2":picker-options="{selectableRange: '18:30:00 - 20:30:00'}"placeholder="任意时间点"></el-time-picker>
有时会增加arrow-control属性,则选择框是另外的带有箭头的样式:
禁选时间==>>可选时间段
在el-date-picker
中,用disabledDate确定禁选时间,剩余的时间为可选时间。而在时间选择器中,则用可选时间段selectableRange
来限制可选项。
<el-time-pickerv-model="value2":picker-options="{selectableRange: '18:30:00 - 20:30:00'}"placeholder="任意时间点"></el-time-picker>
代码与上一小节中el-time-picker
选择任意时间点的组件代码相同,这里重点看:picker-options=
后面的内容。
时间格式转换
跟时间有关的函数
获取当前时间
获取当前时间时间戳 let timestamp=Date.now()
=>1663294789451
获取当前时间区时格式 let nowDate=new Date()
=>Fri Sep 16 2022 10:15:50 GMT+0800 (中国标准时间)
同时注意nowDate
的格式。它是一个Date
对象,我们在浏览器的控制台中输入命令let nowDate=new Date()
,然后打印nowDate。打印结果是字符串,但nowDate并不是字符串格式。在控制台中输入命令nowDate.__proto__
,可以得到完整的nowDate内容,它是一个函数(可以简单理解成一种对象),操作示意图如下所示:
【对.__proto__
感兴趣的小伙伴可以参考博文帮你彻底搞懂JS中的prototype、__proto__与constructor(图解),但不管说的怎么天花乱坠,我们的最开始的目标都是知道什么命令打印出什么内容,什么指令产生什么结果就行】
区时格式时间转化为时间戳
时间戳的格式为Number
使用命令nowDate.getTime()
=>1663294550451
区时格式时间转化为一般时间格式
转化的时候一般就是使用区时格式中带的函数,包括.getTime()
也是区时格式所带的函数。
而转化为区时格式则有多种方法:
方法一,分别获取年月日时分秒,然后拼接
let date = {year: nowDate.getFullYear(),
month: nowDate.getMonth() + 1,
date: nowDate.getDate(),
hour: nowDate.getHours(),
minute: nowDate.getMinutes(),
second: nowDate.getSeconds()
}
this.systemTime = date.year + '-' + date.month + '-' + date.date+ ' ' +date.hour+':'+date.minute+':'+date.second
方法二,用.toLocaleString()
方法转化
nowDate.toLocaleString()
=>‘2022/9/16 10:15:50’
用.replace()将斜杠换成短横
nowDate.toLocaleString().replace(/[/]+/g,'-')
=>‘‘2022-9-16 10:15:50’’
【.replace(/[/]+/g,'-')
括号中为使用通配符模糊搜索,其中g表示使用全局搜索。对js通配符模糊搜索感兴趣的小伙伴可以先关注我等后续更新】
时间戳转化为一般时间格式
时间戳转化为一般时间格式如’2022-9-16 10:11:11’,有其他框架时可以用框架下的方法,如uView框架下的js方法this.$u.timeFormat(e.timestamp,'yyyy-mm-dd HH:MM:ss')
。
一般情况下,我们则需要借助Date()方法,先将时间戳转化为区时格式,然后用区时转化为一般格式。
new Date(parseInt(timestamp)).toLocaleString().replace(/[/]+/g,'-')
//parseInt()方法将字符串转换为数字
//'2022-9-16 13:50:42'
选择器返回的时间格式与转换方法
日期时间类选择器,除了el-time-select
,都有属性value-format
来限制返回的值的格式,在没有指定的情况下,返回的值都是Date对象形式。时间格式字符描述:https://element.eleme.cn/#/zh-CN/component/date-picker#ri-qi-ge-shi
如下图所示,当value-format未指定,el-date-picker中选择日期时间后返回的值value2与el-time-picker中选择时间返回的值value1的打印结果。
时间格式指定后代码如下
<el-date-pickerv-model="value2"align="right"type="datetime"placeholder="选择日期":picker-options="pickerOptions"@blur="printValue"value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker><el-time-pickerv-model="value1":picker-options="{selectableRange: '18:30:00 - 20:30:00',}"@blur="printValue"placeholder="任意时间点"value-format="HH:mm:ss"></el-time-picker>
修改返回值格式之后,打印得到的选择日期后得到的返回值value1与value2。
在什么时候需要注意使用格式转换
比较时间一般都通过时间戳相减的方法,但如果要将数据提交到后台或其他显示,则通常使用如’2022-09-16 10:11:11’的格式。
如前面提到的带快捷键的日期时间选择器
pickerOptions: {shortcuts: [{text: '今天',onClick(picker) {picker.$emit('pick', new Date());}}, {text: '昨天',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24);picker.$emit('pick', date);}}, {text: '一周前',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);picker.$emit('pick', date);}}]},
它在pickerOptions中写了shorcut属性,在属性的onClick()函数中计算了距离当前一周或一天的时间 date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
。
而如果要在页面上显示距离当前一周的时间,则需要将这个时间转化为一般时间格式。
获取当前时间时间戳—>做时间戳计算—>将计算后的时间戳转为一般格式(参考时间戳转为一般格式小节)
element-UI组件之日期时间选择器与时间格式转化相关推荐
- vue element ui里的日期时间选择器 中国标准时间转化为年月日时分秒
<el-date-pickerend-placeholder="结束日期"range-separator="至"start-placeholder=&qu ...
- Element ui 组件库 使用技巧。
按需引入 babel文件 配置. 配置 babel.config.js文件 可以创建 一个js 特意来存放我们需要的 element 组件. 在main.js 文件中 全局引入 上面存放 组件的 js ...
- Element UI 组件库分析和二次开发(一)
我的本地开发环境:M1 芯片Mac,node v12.22.10. 一.Element UI 组件库二次开发的大致流程 1. 从 Element 官方 clone 一份 dev 源码到本地 2. 安装 ...
- Element ui 组件中用键盘事件
//这是表单 <el-form:model="ruleForm"status-icon:rules="rules"ref="ruleForm&q ...
- el-date-picker时间选择器修改时间无效
el-date-picker时间选择器修改时间无效 前言 最近项目当中需要编辑时间的需求,同事小姐姐在修改的时候发现值已经改变,但是页面并没有更新,问了我,我也是第一次遇见这个问题 <el-da ...
- vue【element ui】el-date-picker 日期选择器控件 限制可选的开始时间和结束时间
项目场景: 总结一下日期控件实现开始日期.结束日期的选择范围限制,以便更符合实际情况. 需求: 1.开始时间和结束时间都不能选当前日期之后的时间.(当前时间:2022年5月16日) 2.先选开始时间的 ...
- Element UI组件介绍
简介 element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面. 1.安装Element UI,通过vue脚手架创建项 vue init webpa ...
- 解决vue-admin-template插件element UI组件默认英文改中文
其实vue-admin-template这个框架原来就有的 1.element UI里的组件改中文模式如图: src/main.js: 2.第三方插件如tinymic这个富文本插件改成中文显示,上面方 ...
- 【element ui --- DateTimePicker,有效时间不能晚于当前时间】
如上图所示: 下面展示一些 内联代码片. // DateTimePicker 日期时间组件<el-form-item label="有效时间" prop="expi ...
最新文章
- 计算机网络-物理层设备
- VMware Virtual SAN 互操作性:OpenStack
- c++new时赋初值_基于ssm的客户管理系统 - C_you_again
- python中list,tuple,str相互转换
- 随时间的反向传播算法 BPTT
- Sequence of component save EC and orderadm_h save
- c++ 使用socket实现C/S端文件的下载传输
- PUSHA/POPA
- MyEclipse 启动报错:‘Building workspace‘ has encountered a problem解决方法
- NUC1921 E.迷雾森林【筛选法】
- fisco bcos transaction交易结构 源代码位置
- html5脑图_HTML5制作思维导图
- 上海名媛 -- 精致女孩的打拼生活
- 双创项目_宫颈癌风险智能检测(2)
- 新浪登陆按钮三种方式解析
- 英特尔芯片漏洞比想象中更严重:控制计算机无需密码
- 计算机网络之应用层(DNS域名系统)
- Git快速入门篇—— Windows版本淘宝镜像快速下载安装详细步骤及简单入门教程(附带图文教程)
- win7连接sftp_Windows下用sftp巧妙打造安全传输
- Python批量爬取华语天王巨星周杰伦的音乐