vue中日,周,月,年时间选择器(基于elementui)_vue日历组件 切换月周日都可选择

通过选择上面的选项展示选择不同的日期,周,月份,年份

 因为项目中点击切换时需要传递不同的日期,

例如:日,即选择日期的00:00分-23:59

周:即选择当月的第三周,截取第三周的周一和第三周的周日为开始时间和截止时间传值

月,即选择月的第一天---选择月得最后一天传值

<template>
  <div class="chart-date-picker">
    <el-radio-group v-model="dateType" size="mini" @change="handleChange">
      <el-radio-button label="date">日</el-radio-button>
      <el-radio-button label="week">周</el-radio-button>
      <el-radio-button label="month">月</el-radio-button>
      <el-radio-button label="year">年</el-radio-button>
    </el-radio-group>
    <el-date-picker :clearable="false" v-model="date" size="mini" :picker-options="{ 'firstDayOfWeek': 1 }" :type="dateType" :format="dateType==='week'?'yyyy 第 WW 周':null" :placeholder="dateType==='date'?'选择日':dateType==='week'?'选择周':dateType==='month'?'选择月':dateType==='year'?'选择年':''" style="width: 140px;vertical-align: middle" @change="handleChange"></el-date-picker>
  </div>
</template>
 
<script>
import { dateFormat } from "@/filters/index";
export default {
  name: "ultralabxChartDatePicker",
  props: {
    value: {
      type: Date,
    },
    type: {
      type: String,
      default: "week",
    },
  },
  data() {
    return {
      dateType: "",
      date: null,
    };
  },
  methods: {
    handleChange() {
      let obj = this.timeDifference(this.date, this.dateType);
      this.$emit("handleChangeTime", obj);
    },
    timeDifference() {
      let timeObj = {};
      let time = new Date(dateFormat(this.date, "yyyy-MM-dd")); // 可入参指定时间
      let year = time.getFullYear();
      let month = time.getMonth();
      let date = time.getDate(); // 获取日期
      let day = time.getDay(); // 获取周几，0-6，0表示周日
      let _day = day == 0 ? 7 : day;
      switch (this.dateType) {
        case "date":
          timeObj = {
            startTime: `${dateFormat(this.date, "yyyy-MM-dd")} 00:00:00`,
            endTime: `${dateFormat(this.date, "yyyy-MM-dd")} 23:59:59`,
          };
          break;
        case "week":
          // 获取周一日期
          var startDate = new Date(year, month, date - _day + 1);
          // 获取周日日期
          var endDate = new Date(
            new Date(startDate).getTime() + 6 * 24 * 3600 * 1000
          );
          timeObj = {
            startTime: `${dateFormat(startDate, "yyyy-MM-dd")} 00:00:00`,
            endTime: `${dateFormat(endDate, "yyyy-MM-dd")} 23:59:59`,
          };
          break;
        case "month":
          var startDate = new Date(year, month, 1);
          var endDate = new Date(year, month + 1, 0);
          timeObj = {
            startTime: `${dateFormat(startDate, "yyyy-MM-dd")} 00:00:00`,
            endTime: `${dateFormat(endDate, "yyyy-MM-dd")} 23:59:59`,
          };
          break;
        case "year":
          var startDate = new Date(year, 0, 1);
          var endDate = new Date(year, 12, 0);
          timeObj = {
            startTime: `${dateFormat(startDate, "yyyy-MM-dd")} 00:00:00`,
            endTime: `${dateFormat(endDate, "yyyy-MM-dd")} 23:59:59`,
          };
          break;
      }
      return timeObj;
    },
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.date = val;
      },
    },
    type: {
      immediate: true,
      handler(val) {
        if (val === this.dateType) {
          return;
        }
        this.dateType = val;
      },
    },
    date: {
      immediate: true,
      handler(val) {
        this.$emit("input", val);
      },
    },
    dateType: {
      immediate: true,
      handler(val) {
        if (val === this.type) {
          return;
        }
        this.$emit("update:type", val);
      },
    },
  },
};
</script>
 
<style lang="scss">
.chart-date-picker {
  .el-radio-button--mini .el-radio-button__inner {
    padding: 5px 15px;
  }
 
  .el-radio-button:first-child .el-radio-button__inner {
    border-radius: 15px 0 0 15px;
  }
 
  .el-radio-button:last-child .el-radio-button__inner {
    border-radius: 0;
  }
 
  .el-input--mini .el-input__inner {
    height: 24px;
    line-height: 24px;
  }
 
  .el-input--mini .el-input__icon {
    line-height: 24px;
  }
 
  .el-input__inner {
    border-left: none;
    border-radius: 0 15px 15px 0;
  }
}
</style>
 
<style lang="scss" scoped>
.chart-date-picker {
}
</style>

此处为上面时间格式化的方法,按需使用

/**
 * 日期格式化
 */
export function dateFormat(date, format = 'yyyy-MM-dd hh:mm:ss') {
  if (date !== 'Invalid Date') {
    var o = {
      'M+': date.getMonth() + 1, // month
      'd+': date.getDate(), // day
      'h+': date.getHours(), // hour
      'm+': date.getMinutes(), // minute
      's+': date.getSeconds(), // second
      'q+': Math.floor((date.getMonth() + 3) / 3), // quarter
      'S': date.getMilliseconds() // millisecond
    }
    if (/(y+)/.test(format)) {
      format = format.replace(RegExp.$1,
        (date.getFullYear() + '').substr(4 - RegExp.$1.length))
    }
    for (var k in o) {
      if (new RegExp('(' + k + ')').test(format)) {
        format = format.replace(RegExp.$1,
          RegExp.$1.length === 1 ? o[k]
            : ('00' + o[k]).substr(('' + o[k]).length))
      }
    }
    return format
  }
  return ''
}

父组件中使用方法

<chart-date-picker v-model="value" :type.sync="groupType" @handleChangeTime="handleChangeTime(type=0,$event)"></chart-date-picker>
 
data() {
    retrun {
        value: new Date(),
        groupType: "week",
    
    }
}
 
methods:{
  handleChangeTime(type, timeObj){
    console.log(timeObj)
    // TODO
  }
}