ElementUI 日期范围组件参数设置

在搜索的时候我们经常会根据日期范围筛选数据,后端存储数据一般都是标准时间,前端传参也应该是带时间的标准时间,即使我们查询的只是日期范围不是日期时间范围。

1、组件默认就是标准时间,这个是ok的,没啥问题,但是当我们选择同一天的时候,问题就来了,开始时间和结束时间是一样的

参数截图

我们期望的效果是

mawbDateStart: 2020-04-16T16:00:00.000Z
mawbDateEnd: 2020-04-17T15:59:59.000Z

这个时候需要我们在组件上加上默认时间的参数

:default-time="['00:00:00', '23:59:59']"

2、若在搜索列表中有日期时间的展示,也需要转换成为本地时间展示,具体方法不再赘述,可以根据具体需求自己写方法函数(关于时间建议在统一的时间工具文件中管理,注册过滤器),或者使用moment.js转化时间(下载地址:https://momentjs.com/)。
3、涉及到Safari浏览器时间的回填问题(以下浏览器指的是Safari)
若是后端返回2020-03-15 12:23:34或者2020/03/15T12:23:34这种时间格式,请注意,前方有坑,浏览器会报错Invalid Date,不能识别这种日期格式,需要人为地把”-“改为”/“,或者让后端规范返回值,再赋值到日期组件的model值里面

// 需要将'-'替换成'/',将'T'替换成空格
var dateStr = "2020-03-15 12:23:34"
var date = new Date(dateStr.replace(/\-/g, "/").replace(/T/, ' '))

以下是浏览器支持的格式

> new Date('2020/03/15 12:23:34')
< Sun Mar 15 2020 12:23:34 GMT+0800 (CST)

> new Date('2020-03-15T16:00:00.000Z')
< Fri Mar 16 2020 00:00:00 GMT+0800 (CST)

> new Date('2020-03-15')
< Thu Mar 15 2020 08:00:00 GMT+0800 (CST)

> new Date('2020-03-15T12:23:34')
< Sun Mar 15 2020 20:23:34 GMT+0800 (CST)
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 7,414评论 0 7
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 8,897评论 0 4
  • 有时候开始翻翻别人朋友圈的时候 在想自己究竟是要点什么 姑娘做幼师找个家里做生意的男朋友 平时闲来和女孩子们约会吃...
    4948c28a5457阅读 2,880评论 0 0
  • 文/紫月 嘴上不会说的人,为人最诚恳。 没有花言巧语的天分, 只有善待别人的一颗心; 没有虚伪做作的圆润, 只有出...
    木夏半年阅读 1,684评论 4 5
  • 比如,小时侯向老师告状的时候经常说:when I was reading my book he gave me a...
    老祝读书阅读 6,934评论 0 1

友情链接更多精彩内容