美文网首页
ElementUI 日期范围组件参数设置

ElementUI 日期范围组件参数设置

作者: 听见vian | 来源:发表于2020-04-10 14:16 被阅读0次

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

    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)
    

    相关文章

      网友评论

          本文标题:ElementUI 日期范围组件参数设置

          本文链接:https://www.haomeiwen.com/subject/tsglmhtx.html