年

月

日

用vue moment获取时间
index.vue

<template>
  <div>
    <div>
      <a-button @click="getBtnType(0)" type="primary" style="margin-right: 20px;">年</a-button>
      <a-button @click="getBtnType(1)" type="primary" style="margin-right: 20px;">月</a-button>
      <a-button @click="getBtnType(2)" type="primary" style="margin-right: 20px;">日</a-button>
    </div>
    <div>
      <input-past-now-future ref="timeInput" @timeData="timeData" @timeSlot="timeSlot" />
    </div>
    <div>{{ time }}</div>
  </div>
</template>

<script>
import inputPastNowFuture from './input-past-now-future.vue'

export default {
  name: 'InputPastNowFuture',
  components: { inputPastNowFuture },
  props: {},
  data() {
    return {
      time: ''
    }
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    getBtnType(val) {
      this.$refs.timeInput.handleElectric(val)
    },
    timeData(val) {
      this.time = val
    },
    timeSlot(val) {
      console.log(val)
    },
  }
}
</script>

<style scoped lang="less">
</style>

input-past-now-future.vue

<template>
  <div>
    <div style="display: flex;align-items: center;">
      <a-date-picker
        dropdownClassName="pickerClass"
        :mode="mode"
        :placeholder="placeholder"
        :format='format'
        :valueFormat="valueFormat"
        v-model="timeData"
        :open="open"
        @openChange="openChange"
        @panelChange="panelChange"
        @change="onChange"
        style="margin-right: 10px;"
      />
      <div v-if="mode === 'year'" class="timeBtn">
        <a-button @click="getYear('pastYear', 1)" type="primary">上一年</a-button>
        <a-button @click="getYear('nowYear', 1)" type="primary">本年</a-button>
        <a-button :disabled="disabled" @click="getYear('futureYear', 1)" type="primary">下一年</a-button>
      </div>
      <div v-if="mode === 'month'" class="timeBtn">
        <a-button @click="getMonth('pastMonth', 1)" type="primary">上一月</a-button>
        <a-button @click="getMonth('nowMonth', 1)" type="primary">本月</a-button>
        <a-button :disabled="disabledMonth" @click="getMonth('futureMonth', 1)" type="primary">下一月</a-button>
      </div>
      <div v-if="mode === 'date'" class="timeBtn">
        <a-button @click="getDay('pastDay', 1)" type="primary">昨天</a-button>
        <a-button @click="getDay('nowDay', 1)" type="primary">今天</a-button>
        <a-button :disabled="disabledDay" @click="getDay('futureDay', 1)" type="primary">明天</a-button>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      timeObj: {},
      buttonType: 'year',
      disabled: true,
      disabledMonth: true,
      disabledDay: true,

      nowYearTime: moment(new Date()).format('YYYY-01-01 00:00:00'),
      nowMonthTime: moment(new Date()).format('YYYY-MM-01 00:00:00'),
      nowDayime: moment(new Date()).format('YYYY-MM-DD 00:00:00'),

      // 时间框
      timeData: null,
      open: false,
      mode: 'year',
      format: 'YYYY',
      valueFormat: 'YYYY',
      placeholder: '请选择年份',
    }
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    // 时间框
    // 打开下拉框
    openChange(open) {
      this.open =  open
    },
    // 关闭下拉框
    panelChange(value) {
      this.electricJudgeTime(value)
      if (this.mode !== 'date') {
        this.$emit('timeData', this.timeData)
        this.$emit('timeSlot', this.timeObj)
      }
      this.open = false
    },
    // 情况选择框
    onChange(val) {
      if (this.mode !== 'date') {
        this.reset()
      }
      this.electricJudgeTime(val)
      this.timeData = val
      if (this.mode === 'date') {
        this.$emit('timeData', this.timeData)
        this.$emit('timeSlot', this.timeObj)
      }
      if (val === null) {
        this.disabled = true
        this.disabledMonth = true
        this.disabledDay = true
      }
    },
    // 选择状态
    electricJudgeTime(val) {
      let changeTime = moment(val).format('YYYY-MM-DD HH:mm:ss')
      if (this.mode === 'year') {
        this.compare(changeTime, 'year')
        this.timeData = moment(val).format('YYYY')
        this.format = 'YYYY'
        this.valueFormat = 'YYYY'
      } else if (this.mode === 'month') {
        this.compare(changeTime, 'month')
        this.timeData = moment(val).format('YYYY-MM')
        this.format = 'YYYY-MM'
        this.valueFormat = 'YYYY-MM'
      } else if (this.mode === 'date') {
        this.compare(changeTime, 'date')
        this.timeData = moment(val).format('YYYY-MM-DD')
        this.format = 'YYYY-MM-DD'
        this.valueFormat = 'YYYY-MM-DD'
      }
    },
    // 选择状态初始
    handleElectric(val) {
      let days = val === 0 ? 'year' : val === 1 ? 'month' : 'date'
      this.mode = days
      this.reset()
      if (this.mode === 'year') {
        this.placeholder = '请选择年份'
      }
      if (this.mode === 'month') {
        this.placeholder = '请选择月份'
      }
      if (this.mode === 'date') {
        this.placeholder = '请选择日期'
      }
    },


    // 快捷按钮

    // 判断是否有下年
    compare(time, type) {
      this.timeData = time
      if (type === 'year') {
        this.disabled = this.compareDate(time, this.nowYearTime)
      } else if (type === 'month') {
        this.disabledMonth = this.compareDate(time, this.nowMonthTime)
      } else {
        this.disabledDay = this.compareDate(time, this.nowDayime)
      }
    },
    // 重置
    reset() {
      this.getYear('nowYear')
      this.getMonth('nowMonth')
      this.getDay('nowDay')
      this.timeObj = {}
      this.timeData = null
      this.disabled = true
      this.disabledMonth = true
      this.disabledDay = true
      this.$emit('timeData', this.timeData)
      this.$emit('timeSlot', this.timeObj)
    },
    // 比较时间
    compareDate(d1, d2) {
      let reg = new RegExp('-', 'g')
      return ((new Date(d1.replace(reg, '/'))) >= (new Date(d2.replace(reg, '/'))))
    },
    // 获取年
    getYear(tit, clickType) {
      if (tit === 'nowYear') {
        this.timeData = ''
      }
      this.timeObj = this.getTime(tit, this.timeData)
      this.timeData = this.timeObj.starttime
      this.disabled = this.compareDate(this.timeObj.starttime, this.nowYearTime)
      this.electricJudgeTime(this.timeObj.starttime)
      if (clickType === 1) {
        this.$emit('timeData', this.timeData)
        this.$emit('timeSlot', this.timeObj)
      }
    },
    // 获取月
    getMonth(tit, clickType) {
      if (tit === 'nowMonth') {
        this.timeData = ''
      }
      this.timeObj = this.getTime(tit, this.timeData)
      this.timeData = this.timeObj.starttime
      this.disabledMonth = this.compareDate(this.timeObj.starttime, this.nowMonthTime)
      this.electricJudgeTime(this.timeObj.starttime)
      if (clickType === 1) {
        this.$emit('timeData', this.timeData)
        this.$emit('timeSlot', this.timeObj)
      }
    },
    // 获取天
    getDay(tit, clickType) {
      if (tit === 'nowDay') {
        this.timeData = ''
      }
      this.timeObj = this.getTime(tit, this.timeData)
      this.timeData = this.timeObj.starttime
      this.disabledDay = this.compareDate(this.timeObj.starttime, this.nowDayime)
      this.electricJudgeTime(this.timeObj.starttime)
      if (clickType === 1) {
        this.$emit('timeData', this.timeData)
        this.$emit('timeSlot', this.timeObj)
      }
    },

    // 获取时间
    getTime(name, time) {
      if (time === undefined || time === null || time === '') {
        time = new Date()
      }
      let timeObj = {
        starttime: '',
        endtime: ''
      }
      // 上一年
      if (name === 'pastYear') {
        timeObj.starttime = moment(moment(time).year(moment(time).year() - 1).startOf('year').valueOf()).format('YYYY-MM-DD HH:mm:ss')
        timeObj.endtime = moment(moment(time).year(moment(time).year() - 1).endOf('year').valueOf()).format('YYYY-MM-DD HH:mm:ss')
      }
      // 本年
      if (name === 'nowYear') {
        timeObj.starttime = moment(moment(time).year(moment(time).year()).startOf('year').valueOf()).format('YYYY-MM-DD HH:mm:ss')
        timeObj.endtime = moment(moment().valueOf()).format("YYYY-MM-DD HH:mm:ss");
      }
      // 下一年
      if (name === 'futureYear') {
        timeObj.starttime = moment(moment(time).year(moment(time).year() + 1).startOf('year').valueOf()).format('YYYY-MM-DD HH:mm:ss')
        if (this.compareDate(timeObj.starttime, this.nowYearTime)) {
          timeObj.endtime = moment(moment().valueOf()).format("YYYY-MM-DD HH:mm:ss");
        } else {
          timeObj.endtime = moment(moment(time).year(moment(time).year() + 1).endOf('year').valueOf()).format('YYYY-MM-DD HH:mm:ss')
        }
      }
      // 上一月
      if (name === 'pastMonth') {
        timeObj.starttime = moment(moment(time).month(moment(time).month() - 1).startOf('month').valueOf()).format('YYYY-MM-DD HH:mm:ss')
        timeObj.endtime = moment(moment(time).month(moment(time).month() - 1).endOf('month').valueOf()).format('YYYY-MM-DD HH:mm:ss')
      }
      // 本月
      if (name === 'nowMonth') {
        timeObj.starttime = moment(moment(time).month(moment(time).month()).startOf('month').valueOf()).format('YYYY-MM-DD HH:mm:ss')
        timeObj.endtime = moment(moment().valueOf()).format("YYYY-MM-DD HH:mm:ss");
      }
      // 下一月
      if (name === 'futureMonth') {
        timeObj.starttime = moment(moment(time).month(moment(time).month() + 1).startOf('month').valueOf()).format('YYYY-MM-DD HH:mm:ss')
        if (this.compareDate(timeObj.starttime, this.nowMonthTime)) {
          timeObj.endtime = moment(moment().valueOf()).format("YYYY-MM-DD HH:mm:ss");
        } else {
          timeObj.endtime = moment(moment(time).month(moment(time).month() + 1).endOf('month').valueOf()).format('YYYY-MM-DD HH:mm:ss')
        }
      }

      // 昨天
      if (name === 'pastDay') {
        timeObj.starttime = moment(moment(time).add(-1, 'days').startOf("day").valueOf()).format("YYYY-MM-DD HH:mm:ss");
        timeObj.endtime = moment(moment(time).add(-1, 'days').endOf('day').valueOf()).format('YYYY-MM-DD HH:mm:ss');
      }
      // 今天
      if (name === 'nowDay') {
        timeObj.starttime = moment(moment(time).startOf("day").valueOf()).format("YYYY-MM-DD HH:mm:ss");
        timeObj.endtime = moment(moment().valueOf()).format("YYYY-MM-DD HH:mm:ss");
      }
      // 明天
      if (name === 'futureDay') {
        timeObj.starttime = moment(moment(time).add(+1, 'days').startOf("day").valueOf()).format("YYYY-MM-DD HH:mm:ss");
        if (this.compareDate(timeObj.starttime, this.nowDayime)) {
          timeObj.endtime = moment(moment().valueOf()).format("YYYY-MM-DD HH:mm:ss");
        } else {
          timeObj.endtime = moment(moment(time).add(+1, 'days').endOf('day').valueOf()).format('YYYY-MM-DD HH:mm:ss');
        }
      }
      return timeObj
    }
  }
}
</script>

<style scoped lang="less">
::v-deep {
  .ant-radio-button-wrapper-checked {
    color: #fff;
    background: #40a9ff;
  }

  .ant-radio-button-wrapper-checked:active {
    color: #fff;
  }
  .ant-radio-button-wrapper-checked:hover {
    color: #fff;
  }
}
.timeBtn {
  display: flex;
  margin: 10px 0;
}
</style>