位置: IT常识 - 正文

element-UI组件之日期时间选择器与时间格式转化(element_ui)

编辑:rootadmin
element-UI组件之日期时间选择器与时间格式转化 element-UI组件之日期时间选择器与时间格式转化日期选择器与时间选择器的一般使用日期时间选择器选择日期时间点选择日期范围日期选择器月份范围选择器禁选日期用time.getTime()进行日期(时间)格式的转换时间选择器el-time-select选择固定时间点el-time-picker选择任意时间点禁选时间==>>可选时间段时间格式转换跟时间有关的函数获取当前时间区时格式时间转化为时间戳区时格式时间转化为一般时间格式方法一,分别获取年月日时分秒,然后拼接方法二,用`.toLocaleString()`方法转化时间戳转化为一般时间格式选择器返回的时间格式与转换方法在什么时候需要注意使用格式转换日期选择器与时间选择器的一般使用

推荐整理分享element-UI组件之日期时间选择器与时间格式转化(element_ui),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:element ui常用组件,element ui常用组件,elements组件,element ui组件,vue element组件,elementui组件有哪些,element ui组件,element ui组件,内容如对您有帮助,希望把文章链接给更多的朋友!

element-ui中关于时间选择的组件一共有三个,时间选择器、日期选择器以及时间日期选择器,即可选择时间,可选择日期以及日期和时间都能选择。

日期时间选择器

先看element-ui的日期时间选择器组件能满足哪些功能需求,官网地址为element-ui日期时间选择器:https://element.eleme.cn/#/zh-CN/component/datetime-picker 顾名思义,日期时间选择器就是即可以选择日期也可以选择时间的组件。 选择日期时间上,有选择时间点和时间段两种功能,通过修改type属性值实现:

选择日期时间点

<el-date-picker v-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-picker v-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-picker v-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选择固定时间点element-UI组件之日期时间选择器与时间格式转化(element_ui)

<el-time-select v-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-picker v-model="value2" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="任意时间点"> </el-time-picker>

有时会增加arrow-control属性,则选择框是另外的带有箭头的样式:

禁选时间==>>可选时间段

在el-date-picker中,用disabledDate确定禁选时间,剩余的时间为可选时间。而在时间选择器中,则用可选时间段selectableRange来限制可选项。

<el-time-picker v-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-picker v-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-picker v-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)。 而如果要在页面上显示距离当前一周的时间,则需要将这个时间转化为一般时间格式。 获取当前时间时间戳—>做时间戳计算—>将计算后的时间戳转为一般格式(参考时间戳转为一般格式小节)

本文链接地址:https://www.jiuchutong.com/zhishi/283654.html 转载请保留说明!

上一篇:一叶兰的养殖方法(一叶兰的养殖方法和注意事项有哪些)

下一篇:不符合Win11硬件标准如何照样升级Win11?(不符合win11硬件要求安装会怎么样)

  • 微信被屏蔽后会显示什么(微信屏蔽后会看到视频号吗)

    微信被屏蔽后会显示什么(微信屏蔽后会看到视频号吗)

  • uc网盘普通会员云收藏次数(uc网盘普通会员开通不了)

    uc网盘普通会员云收藏次数(uc网盘普通会员开通不了)

  • 微信开通商家收款码提现要手续费吗(微信开通商家收款码需要营业执照吗)

    微信开通商家收款码提现要手续费吗(微信开通商家收款码需要营业执照吗)

  • wifi已连接需登录认证(wifi连接需要登录)

    wifi已连接需登录认证(wifi连接需要登录)

  • 小米怎么打开地震预警(小米怎么打开地震警报)

    小米怎么打开地震预警(小米怎么打开地震警报)

  • 华为怎么找回删除的app(华为怎么找回删除的照片)

    华为怎么找回删除的app(华为怎么找回删除的照片)

  • qq测试版有多少人有(qq测试版有多少人有资格)

    qq测试版有多少人有(qq测试版有多少人有资格)

  • 华为p40手电筒在哪

    华为p40手电筒在哪

  • 手机信号上面显示的E是什么意思(手机信号上面显示4g+是什么意思)

    手机信号上面显示的E是什么意思(手机信号上面显示4g+是什么意思)

  • 常用的网络管理模型(常用的网络管理命令)

    常用的网络管理模型(常用的网络管理命令)

  • 电脑13寸是多大(电脑13寸是多少厘米 长宽)

    电脑13寸是多大(电脑13寸是多少厘米 长宽)

  • iphonex来电时如何拒绝(iphonex来电设置)

    iphonex来电时如何拒绝(iphonex来电设置)

  • 笔记本电脑长期不用开不了机怎么办(笔记本电脑长期不用怎么存放)

    笔记本电脑长期不用开不了机怎么办(笔记本电脑长期不用怎么存放)

  • 未兼容android9系统什么意思(未兼容android9怎么办)

    未兼容android9系统什么意思(未兼容android9怎么办)

  • word文档怎么画粗横线(word文档怎么画思维导图)

    word文档怎么画粗横线(word文档怎么画思维导图)

  • word划线怎么能画直线(word划线怎么能画斜线)

    word划线怎么能画直线(word划线怎么能画斜线)

  • 电脑垃圾广告怎么彻底清除(电脑垃圾广告怎么彻底清除win10)

    电脑垃圾广告怎么彻底清除(电脑垃圾广告怎么彻底清除win10)

  • 手机上怎么修改图片大小(手机上怎么修改银行卡密码)

    手机上怎么修改图片大小(手机上怎么修改银行卡密码)

  • 荣耀9xpro处理器型号是多少(华为荣耀x9pro详细配置)

    荣耀9xpro处理器型号是多少(华为荣耀x9pro详细配置)

  • iphone x是不是双卡(iPhone X是不是双扬声器)

    iphone x是不是双卡(iPhone X是不是双扬声器)

  • 大王卡怎么激活应用宝(腾讯大王卡怎么激活)

    大王卡怎么激活应用宝(腾讯大王卡怎么激活)

  • ppt维恩图在哪儿(ppt基本维恩图smartart强烈效果)

    ppt维恩图在哪儿(ppt基本维恩图smartart强烈效果)

  • 微信群太多怎么退(微信群太多怎么找出来)

    微信群太多怎么退(微信群太多怎么找出来)

  • qq昵称旁边的小耳朵(qq昵称旁边的小船)

    qq昵称旁边的小耳朵(qq昵称旁边的小船)

  • 手机微信突然支付不了(手机微信突然支付不了是什么情况呢,之前手机是别人的)

    手机微信突然支付不了(手机微信突然支付不了是什么情况呢,之前手机是别人的)

  • 微信小程序登录获取不到头像和昵称解决办法!(微信小程序登录的账号怎么注销)

    微信小程序登录获取不到头像和昵称解决办法!(微信小程序登录的账号怎么注销)

  • 税收负担影响企业的利润吗
  • 终止经营净利润计算公式
  • 企业所得税季报可以更正吗
  • 财务报表可以补充分类吗
  • 总公司汇总缴纳所得税升为一般纳税人分公司受影响吗
  • 小规模建筑业如何做账
  • 行政事业单位暂付款无法收回该怎么处理
  • 营改增 旅游服务
  • 融资租入固定资产属于资产吗
  • 营改增的相关规定
  • 主营业务税金及附加包括印花税吗
  • 佣金发票可以抵扣吗
  • 免抵退税的范围
  • 专项储备属于利润分配吗
  • 零申报做账怎么做
  • 加工费的会计处理
  • 生产车间的各种费用
  • linux如何使用
  • 商品换购是什么意思
  • php数组函数,选班长
  • 银行本票实际金额小于票面金额
  • 出租车车票可以出卖吗
  • executor进程
  • 违约金需要缴纳企业所得税吗
  • php生成压缩包
  • vue动态绑定class的方法
  • vue中 router.beforeEach() 的用法
  • js删除
  • 将织梦dedecms转换到wordpress
  • PostgreSQL教程(三):表的继承和分区表详解
  • 如何用织梦在本地搭建网站
  • 工程施工与工程结算对冲分录
  • 发票作废是什么样的
  • 小规模纳税人需要每月清卡吗
  • 工程服务费会计怎么做账
  • 个人所得税中的速算扣除数是什么意思
  • 企业所得税季度平均值怎么算
  • 开多少平方超市赚钱
  • 免税收入是否可抵扣
  • 加工费怎么做账
  • 应收贷方余额表示什么意思
  • 预付工程款会计分录
  • 预收账款属于借还是贷
  • 小微企业取得的进项税能不能抵扣
  • 开业赠送礼品会计属于什么费用
  • 年度损益调整的会计分录
  • 企业支付宝提现到对公账户要交税吗
  • 税控盘清卡时间
  • 负数发票怎么开具?
  • 非金融企业间借款利息开票税率
  • 房地产企业收入确认条件税法
  • 高新技术企业每年需要多少专利
  • 固定资产成本包括什么
  • 账本页面设置
  • sql语句排除重复数据
  • sqlserver存储过程返回多个结果集
  • Mysql5.7.14 linux版密码忘记完美解决办法
  • macos sierra版本10.12.6升级
  • centos sync
  • 取消windows 7的自动关机如何设置
  • 电脑被攻击了怎么修复
  • 360rps.exe
  • winxp内存不能为read
  • window7激活系统
  • ubuntu 重启xorg
  • win8出现蓝屏怎么修复
  • 初始化opengl时出错
  • js如何将毫秒转换为日期
  • 安卓笔记软件squid使用教程
  • js仿QQ中对联系人向左滑动、滑出删除按钮的操作
  • shell脚本启动应用程序
  • jquery easyui插件
  • 工作笔记范文100篇简短
  • 面向对象三大基本特性
  • python中redis的用法
  • javascript如何写操作命令
  • 外经证的有效期是多久
  • 残疾人创业有税收什么优惠政策
  • 资源税属于国税还是地税
  • 国家税务总局全国增值税查验平台
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设