element日期选择器 年月日选择

element日期选择器 年月日选择

1，效果图

2，月和日官网上都有现成的，直接拿来用，年手动写的

<div class="tableoptbox">
          <div class="tableoptboxleft">
            <a-radio-group v-model="type" :default-value="0" @change="onchangeradio">
              <a-radio :value="0">日数据</a-radio>
              <a-radio :value="1">月数据</a-radio>
              <a-radio :value="2">年数据</a-radio>
            </a-radio-group>
          </div>
          <div class="tableoptboxright">
            <!-- 年 -->
            <el-date-picker
              v-show="type == 2"
              v-model="startYear"
              type="year"
              placeholder="开始年"
              size="mini"
              class="year-picker"
              @change="changeStartYear"
              format="yyyy 年"
              value-format="yyyy"
              prefix-icon=""
            >
            </el-date-picker>
            <span class="range-word" v-show="type == 2"> ~ </span>
            <el-date-picker
              v-show="type == 2"
              v-model="endYear"
              type="year"
              placeholder="结束年"
              size="mini"
              class="year-picker"
              @change="changeEndYear"
              format="yyyy 年"
              value-format="yyyy"
            >
            </el-date-picker>
            <!-- 月 -->
            <el-date-picker
              v-show="type == 1"
              v-model="dataTime"
              @change="timeOptions"
              format="yyyy - MM "
              type="monthrange"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
            >
            </el-date-picker>

            <!-- 日 -->
            <el-date-picker
              v-show="type == 0"
              v-model="createTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="riOptions"
            >
            </el-date-picker>
          </div>
        </div>

3， 传参的时候判断用到parseTime，必须要引入，否则全部失效，文件会放在最下边

import { parseTime } from '@/utils/date'
export default {
data(){
  return{
      startYear: '', //开始年
      endYear: '', //结束年
      createTime: '', //日
      dataTime: '',//月
      type: 0 //	type 0日 1 月 2 年
  }
 }
}

4，选择年月日的回调

methods：{
  // 选择年月日
    onchangeradio(data) {
      this.type = data.target.value
    }
	//选择年月日的回调
	// 开始年
    changeStartYear(valStart) {
      this.startYear = valStart
      // 开始年份大于结束年份，调换 需要的打开 
      // if (Number(this.startYear) > Number(this.endYear)) {
      //   this.startYear = this.endYear
      //   this.endYear = valStart
      // }
    },
    //结束年
    changeEndYear(valEnd) {
      this.endYear = valEnd
      // if (Number(this.startYear) > Number(this.endYear)) {
      //   this.endYear = this.startYear
      //   this.startYear = valEnd
      // }
    },
    // 月
    timeOptions(value) {
      // 获取时间选择器的开始月
      let startDay = parseTime(value.toString().split(',')[0], '{y}-{m}') 
      // 获取时间选择器的结束月
      let endDay = parseTime(value.toString().split(',')[1], '{y}-{m}') 
      this.dataTime[0] = startDay
      this.dataTime[1] = endDay
    },
    // 日
    riOptions(value) {
      // 获取时间选择器的开始日
      let startTime = parseTime(value.toString().split(',')[0], '{y}-{m}-{d} {h}:{i}:{s}')
      // 获取时间选择器的开始日
      let upTime = parseTime(value.toString().split(',')[1], '{y}-{m}-{d} {h}:{i}:{s}')
      this.createTime[0] = startTime
      this.createTime[1] = upTime
    },
}

5，传参的时候 判断一下 如果选择了就传 没选择就不传

    // 0 日 1月 2年
	if (this.type == 0) {
        data.startTime = this.createTime[0] ? parseTime(this.createTime[0], '{y}-{m}-{d} 00:00:00') : null
        data.upTime = this.createTime[1] ? parseTime(this.createTime[1], '{y}-{m}-{d} 23:59:59') : null
      } else if (this.type == 1) {
        data.startTime = this.dataTime[0] ? parseTime(this.dataTime[0], '{y}-{m}') : null
        data.upTime = this.dataTime[1] ? parseTime(this.dataTime[1], '{y}-{m}') : null
      } else if (this.type == 2) {
        data.startTime = this.startYear ? this.startYear  : null
        data.upTime = this.endYear ? this.endYear  : null
      }

6，参数位置 同上 ↑↑↑

7，年月日传参图

8，utils/date.js

export function parseTime(time, cFormat) {
  if (arguments.length === 0) {
    return null
  }
  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
      time = parseInt(time)
    }
    if (typeof time === 'number' && time.toString().length === 10) {
      time = time * 1000
    }
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
    const value = formatObj[key]
    // Note: getDay() returns 0 on Sunday
    if (key === 'a') {
      return ['日', '一', '二', '三', '四', '五', '六'][value]
    }
    return value.toString().padStart(2, '0')
  })
  return time_str
}