Vue页面的搜索条件中对时间范围是同一天日期的处理

末蓝、 2023-03-02 13:22 6阅读 0赞

产生背景：

VUE列表界面常用的统计都会用到时间去过滤，项目中记录的时间为（年-月-日 时:分:秒）这种的，那么问题就是，如果搜索条件中的组件只是年月日，而没有时分秒。这种情况下，如果将开始时间和结束时间都输入为同一天的话，就不好弄了。所以下面提供两种方法来处理这种情况。

一.第一种情况，简单粗暴

1.直接改VUE组件

①项目中用的组件是这种日期选择器：

![20200729173026966.png][]

②修改后的组件为日期时间选择器

![20200729173230423.png][]

由此，修改组件后，就会有当天的时间范围了，即2020-07-29 00:00:00  ~ 2020-07-29 23:59:59 这就是今天最大的时间范围，自然那这俩时间去查当天的数据就没问题了。

VUE组件地址：[https://element.faas.ele.me/\#/zh-CN/component/installation][https_element.faas.ele.me_zh-CN_component_installation]

2.就是用时间格式化方法来处理

①写一个公共的时间格式化方法

/**
     * Created by syp on 2020/7/29.
     */
    
    exports.install = function (Vue, options) {
     Vue.prototype.formatDateYYMMDD = function (val) {
        let dt = new Date(val)
        let yyyy = dt.getFullYear()
        let MM = (dt.getMonth() + 1).toString().padStart(2, '0')
        let dd = dt.getDate().toString().padStart(2, '0')
        return yyyy + '-' + MM + '-' + dd
      }
    
      Vue.prototype.minDayFormatDate = function (val) {
        let dt = new Date(val)
        let yyyy = dt.getFullYear()
        let MM = (dt.getMonth() + 1).toString().padStart(2, '0')
        let dd = dt.getDate().toString().padStart(2, '0')
        return yyyy + '-' + MM + '-' + dd + ' ' + '00' + ':' + '00' + ':' + '00'
      }
    
      Vue.prototype.maxDayFormatDate = function (val) {
        let dt = new Date(val)
        let yyyy = dt.getFullYear()
        let MM = (dt.getMonth() + 1).toString().padStart(2, '0')
        let dd = dt.getDate().toString().padStart(2, '0')
        return yyyy + '-' + MM + '-' + dd + ' ' + '23' + ':' + '59' + ':' + '59'
      }
    }

注：该方法就是只针对同一天日期并且格式为（年月日）这种做处理的。

②VUE输入框中时间

![20200729174314491.png][]③由上图可看出是年月日这种格式的，在查询方法传参之前进行调用公共的时间格式化方法处理它，整成咱们想要的那种类型

![20200729174658909.png][]

④.按照上面步骤整完就可以了

![20200729174815429.png][]

[20200729173026966.png]: /images/20230208/0c4f8885c6574bbe91bf90b831f56bb9.png
[20200729173230423.png]: /images/20230208/8d76475a538f41d2b303186a442f9db5.png
[https_element.faas.ele.me_zh-CN_component_installation]: https://element.faas.ele.me/#/zh-CN/component/installation
[20200729174314491.png]: /images/20230208/ef04e1fff70d4bc69d30d328bdb9a7be.png
[20200729174658909.png]: /images/20230208/f10bdcc0bfb9421b81b3302a60e5c6b2.png
[20200729174815429.png]: /images/20230208/aa4b58850cf349eda428b208749e2de4.png