时间选择器使用

时间选择器

这里的时间选择器是较复杂的时间选择器，融合了日，周，月，季度，年以及自定义的，具体的展示如下图

时间选择器处理

由于我们需要选择自己想要选择的时间，并将其获取到，然后做一些处理，所以我们需要监听时间的改变，这时需要在watch中对时间的监听。

• 时间选择器组价的使用

<h-time-selector v-model="time"
                             :time-labels="timeLabels"
                             :granularity-list="granularityList"
                             :dayType="dayType"
                             :quarter-select-list="quarterSelectList"
                             ref="time">
</h-time-selector>

• data中的初始化数据

//data中的数据初始化
 time: {
        type: 'day',
        // 设置时间选择器最初的显示时间
        currentTime: [new Date(new Date().toLocaleDateString().replace(/-/gm, '/')), new Date()],
        granularity: ''
      },
      dayType: 'accurate',
      timeLabels: [
        {
          label: 'day',
          name: '日'
        },
        {
          label: 'week',
          name: '周'
        },
        {
          label: 'month',
          name: '月'
        },
        {
          label: 'quarter',
          name: '季'
        },
        {
          label: 'year',
          name: '年'
        },
        {
          label: 'custom',
          name: '自定义'
        }
      ],
      granularityList: [
        {
          type: 'dayly',
          value: 'dayly',
          name: '按日统计'
        },
        {
          type: 'weekly',
          value: 'weekly',
          name: '按周统计'
        },
        {
          type: 'monthly',
          value: 'monthly',
          name: '按月统计'
        }, {
          type: 'quarterly',
          value: 'quarterly',
          name: '按季度统计'
        }, {
          type: 'yearly',
          value: 'yearly',
          name: '按年统计'
        }
      ],
      quarterSelectList: [
        {
          name: '第一季度',
          id: 1
        },
        {
          name: '第二季度',
          id: 2
        },
        {
          name: '第三季度',
          id: 3
        },
        {
          name: '第四季度',
          id: 4
        }],
        // 下面的变量，作为数据处理需要使用到的数据
      startTime: '',
      endTime: '',
      dimensionType: 0

• 对选择的时间的监听，在watch中监听

// 监控时间选择器的时间改变
    time (val) {
      if (((val && val.currentTime && val.currentTime.length) || val.type === 'custom') && this.currentNode.id) {
        console.log('设置过后的默认时间是', val)
        this.time = val
        this.getAlarmStatistics(val, this.currentNode)
      }
    },

• 时间的参数的使用，需要知道当前选择的时间维度是什么，是日，周，还是月，等，再然后就是时间的开始时间和结束时间，这里主要是写一个函数进行处理，方法为：

// 设置时间参数
    setParmas (val) {
      switch (val.type) {
        case 'day':
          this.dimensionType = 0
          this.startTime = val.currentTime[0].replace(/-/g, '/')
          this.endTime = val.currentTime[1].replace(/-/g, '/')
          break
        case 'week':
          this.dimensionType = 1
          this.startTime = val.currentTime[0].replace(/-/g, '/')
          this.endTime = val.currentTime[1].replace(/-/g, '/')
          break
        case 'month':
          this.dimensionType = 1
          this.startTime = this.endTime = val.currentTime.replace(/-/g, '/')
          break
        case 'quarter':
          this.dimensionType = 3
          this.startTime = val.currentTime[0].replace(/-/g, '/')
          this.endTime = val.currentTime[1].replace(/-/g, '/')
          break
        case 'year':
          this.dimensionType = 3
          this.startTime = this.endTime = val.currentTime.replace(/-/g, '/')
          break
        case 'custom':
          // 自定义的时候，根据选择的时间跨度，决定granularityList可以选择的统计方法
          // 时间不超过7天的，自定义按照日来统计  时间维度为 0
          // 时间超过7天不超过31天，自定义按照日和周来统计  时间维度可以为 0和1
          // 时间超过31天不超过1年的，自定义按照周，月，季来统计  时间维度可以为 1和 3
          // 时间超过1年的，自定义按照月，季，年来统计  时间维度可以为 1和3
          if (val.granularity === 'dayly') {
            this.dimensionType = 0
          } else if (val.granularity === 'weekly' || val.granularity === 'monthly') {
            this.dimensionType = 1
          } else if (val.granularity === 'yearly ' || val.granularity === 'quarterly') {
            this.dimensionType = 3
          }
          this.startTime = val.currentTime[0].replace(/-/g, '/')
          this.endTime = val.currentTime[1].replace(/-/g, '/')
      }
    }

最后

以上就是健壮中心为你收集整理的时间选择器使用的全部内容，希望文章能够帮你解决时间选择器使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。