zoukankan      html  css  js  c++  java
  • Element UI

    <el-date-picker
        v-else
        v-model="searchForm.data_Selected"
        type="daterange"
        unlink-panels
        range-separator="~"
        start-placeholder="開始期間"
        end-placeholder="終了期間"
        :picker-options="pickerOptions"
        format="yyyy/MM/dd">
    </el-date-picker>    
    data() {
        return {
          pickerOptions: {
            shortcuts: [{
              text: '今日',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                picker.$emit('pick', [start, end])
              }
            }, {
              text: '昨日',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24)
                end.setTime(end.getTime() - 3600 * 1000 * 24)
                picker.$emit('pick', [start, end])
              }
            }, {
              text: '先週',
              onClick(picker) {
                var weekDate = new Date(new Date().getTime() - 7 * 24 * 3600 * 1000)
                var weekDate2 = new Date(new Date().getTime() - 7 * 24 * 3600 * 1000)
                var day = weekDate.getDay()
                var time = weekDate.getDate() - day + (day === 0 ? - 6 : 1)
                var startDate = new Date(weekDate.setDate(time))
                var start = startDate.getFullYear() + '-' + (startDate.getMonth() +1 ) + '-' + startDate.getDate()
                var endDate = new Date(weekDate2.setDate(time + 6))
                var end = endDate.getFullYear() + '-' + ( endDate.getMonth() + 1) + '-' + endDate.getDate()
                picker.$emit('pick', [start, end])
              }
            }, {
              text: '先月',
              onClick(picker) {
                var year = new Date().getFullYear()
                var month = new Date().getMonth()
                if (month === 0) {
                    month = 12
                    year = year - 1
                } else if (month < 10) {
                    month = '0' + month
                }
                var monthDate = new Date(year, month, 0)
                var start = year + '-' + month + '-01'
                var end = year + '-' + month + '-' + monthDate.getDate()
                picker.$emit('pick', [start, end])
              }
            }, {
              text: '今月',
              onClick(picker) {
                var year = new Date().getFullYear()
                var month = new Date().getMonth() + 1
                const start = year + '-' + month + '-01' 
                const end = new Date()
                picker.$emit('pick', [start, end])
              }
            }]
          },
          searchForm: {
            data_Selected: ''
          }
        }
      }

    效果图:

  • 相关阅读:
    IO流基础
    DB2 存储过程创建、系统表
    dubbo实现原理简单介绍
    Java 标准 I/O 介绍
    mysql由于权限问题看不到用户数据库
    java 字符常量池
    Java NIO:NIO概述
    128 C语言实现文件复制功能(包括文本文件和二进制文件)
    Linux 下各个目录的作用及内容
    Linux文件系统详解
  • 原文地址:https://www.cnblogs.com/cczhao06/p/13589344.html
Copyright © 2011-2022 走看看