iview选择月份 月初月末 时间戳格式

简介: iview选择月份 月初月末 时间戳格式

本文记录的几个要点
1、结束时间不得比开始时间提前
2、当前月份之后不可选
3、开始时间为当月的第一天 eg: 01月01日 00:00:00
结束时间为当月的最后一天 eg: 12月31日 23:59:59
转化为时间戳格式入参
4、默认展示向前推12个月
eg: 2019-12 ~ 2020-12
image.png

 <date-picker type="month" :value="leftTime" placeholder="请选择开始时间" :options="startTimeOption" @on-change="onStartTimeChange"></date-picker>
 <date-picker type="month" :disabled = 'disabled' :value="rightTime" placeholder="请选择结束时间" :options="endTimeOption" @on-change="onEndTimeChange"></date-picker>
data() {
    return :{
      leftTime: getDate('yyyy-MM-dd', new Date().getTime() - 3600 * 1000 * 24 * 30 * 12), // 月份开始时间
      tempLeft: '',
      rightTime: getDate('yyyy-MM-dd', new Date().getTime()), // 月份结束时间
      tempRight: '',
      disabled: true, // 禁止使用第二个
      startTimeOption: {}, // 开始时间校验
      endTimeOption: { // 结束时间校验
        disabledDate (date) {
          return date && date.valueOf() > Date.now() - 86400000
                    }
              }
        }
}
  methods: {
    // 时间选择 - 开始日期
    onStartTimeChange (startTime, type) {
      this.endTimeOption = {
        disabledDate (endTime) {
          return endTime < new Date(startTime) || endTime > Date.now()
        }
      }
      this.disabled = false
      this.tempLeft = getTime(startTime + '-01 00:00:00')
      if (this.tempRight && this.tempLeft) this.monthActive(1)
    },
    // 结束日期
    onEndTimeChange (endTime, type) {
      this.startTimeOption = {
        disabledDate (startTime) {
          return startTime > new Date(endTime) || startTime > Date.now()
        }
      }
      // endTime返回 2020-12
      var y = endTime.substring(0, 4)
      var m = endTime.substring(5, 8)
      this.tempRight = getTime(getDate('yyyy-MM-dd 23:59:59', new Date(y, m, 1 - 1).getTime()))
      if (this.tempRight && this.tempLeft) this.monthActive(1)
      }
    }
    // 入参
    monthActive (pageIndex) {    
      const data = {
        leftTime: this.tempLeft, // 这里是转化好的时间戳格式
        rightTime: this.tempRight,
        pageIndex: 1,
        pageSize: 10,
        type: 2
       }
       deviceOnlineData(data).then().catch()
    }
created() {
    // 把需要入参的值转化为时间戳格式
    方法和开始日期 结束日期 一样
}

相关文章
|
存储 缓存 文件存储
如何保证分布式文件系统的数据一致性
分布式文件系统需要向上层应用提供透明的客户端缓存,从而缓解网络延时现象,更好地支持客户端性能水平扩展,同时也降低对文件服务器的访问压力。当考虑客户端缓存的时候,由于在客户端上引入了多个本地数据副本(Replica),就相应地需要提供客户端对数据访问的全局数据一致性。
33254 202
如何保证分布式文件系统的数据一致性
|
设计模式 存储 监控
设计模式(C++版)
看懂UML类图和时序图30分钟学会UML类图设计原则单一职责原则定义:单一职责原则,所谓职责是指类变化的原因。如果一个类有多于一个的动机被改变,那么这个类就具有多于一个的职责。而单一职责原则就是指一个类或者模块应该有且只有一个改变的原因。bad case:IPhone类承担了协议管理(Dial、HangUp)、数据传送(Chat)。good case:里式替换原则定义:里氏代换原则(Liskov 
36823 22
设计模式(C++版)
|
存储 编译器 C语言
抽丝剥茧C语言(初阶 下)(下)
抽丝剥茧C语言(初阶 下)
|
机器学习/深度学习 人工智能 自然语言处理
带你简单了解Chatgpt背后的秘密:大语言模型所需要条件(数据算法算力)以及其当前阶段的缺点局限性
带你简单了解Chatgpt背后的秘密:大语言模型所需要条件(数据算法算力)以及其当前阶段的缺点局限性
24905 16
|
机器学习/深度学习 弹性计算 监控
重生之---我测阿里云U1实例(通用算力型)
阿里云产品全线降价的一力作,2023年4月阿里云推出新款通用算力型ECS云服务器Universal实例,该款服务器的真实表现如何?让我先测为敬!
36824 15
重生之---我测阿里云U1实例(通用算力型)
|
SQL 存储 弹性计算
Redis性能高30%,阿里云倚天ECS性能摸底和迁移实践
Redis在倚天ECS环境下与同规格的基于 x86 的 ECS 实例相比,Redis 部署在基于 Yitian 710 的 ECS 上可获得高达 30% 的吞吐量优势。成本方面基于倚天710的G8y实例售价比G7实例低23%,总性价比提高50%;按照相同算法,相对G8a,性价比为1.4倍左右。
|
存储 算法 Java
【分布式技术专题】「分布式技术架构」手把手教你如何开发一个属于自己的限流器RateLimiter功能服务
随着互联网的快速发展,越来越多的应用程序需要处理大量的请求。如果没有限制,这些请求可能会导致应用程序崩溃或变得不可用。因此,限流器是一种非常重要的技术,可以帮助应用程序控制请求的数量和速率,以保持稳定和可靠的运行。
29949 52

热门文章

最新文章