自定义日期组件，左右按钮控制向前或向后翻年、翻月、翻周、翻日

关注

原创最新推荐文章于 2026-09-18 18:20:11 发布 1.7k 阅读 AI 写同款· GEO 优化 ›

遇到这样一个需求，为了方便用户操作，使用左右按钮进行查看上一年或者下一年数据、上一月或者下一月数据、上一周或者下一周数据、前一天，或者后一天数据。
在这里插入图片描述
如上图所示，点击左右按钮，时间往前或往后变更，按钮也会出现禁用状态。
具体实现代码如下：

<template>
  <div class="c-date">
    <button type="text"
            class="btn-prev"
            :disabled="disabledPrevCurrent"
            @click.stop="leftClick"
    >
      <i class="el-icon " :class="[iconType=='yearIcon'? 'el-icon-d-arrow-left': 'el-icon-arrow-left', disabledPrevCurrent == false ? 'fontColor': '']"></i>
    </button>
    <span v-if="isWeek">
      <span>{{ getWeek[0] }}</span> <span style="margin:0 10px;">至</span> <span>{{ getWeek[1] }}</span>
    </span>
    <span class="dateFont" v-else>{{ getDate }}<slot></slot></span>
    <button type="text"
            class="btn-next"
            :disabled="disabledNextCurrent"
            @click.stop="rightClick"
    >
      <i class="el-icon" :class="[iconType=='yearIcon'? 'el-icon-d-arrow-right': 'el-icon-arrow-right',disabledNextCurrent == false ? 'fontColor': '']"></i>
    </button>

  </div>
</template>

<script>

  import moment from 'moment'
  export default {
    name: 'myDate',
    props:{
      isWeek:{ // 是否是周范围
        type:Boolean,
        required: false,
        default: false
      },
      week:{ // 周范围时间
        type:Array,
        required:false,
        default:function(){
          const startDate = moment().week(moment().week()).startOf('week').format('YYYY-MM-DD');   //这样是年月日的格式
          const endDate = moment().week(moment().week()).endOf('week').format('YYYY-MM-DD'); //这样是时间戳的格式
          return [startDate,endDate]
        }
      },
      date:{ // 日期
        type: [String,Object,Date],
        required: false,
        default: function(){
          return new Date()
        }
      },
      disabledPrev:{ // 左边按钮是否禁用
        type:Boolean,
        required: false,
        default: false
      },
      disabledNext:{ // 右边按钮是否禁用
        type:Boolean,
        required: false,
        default: false
      },
      type:{ // 日期格式类型， eg: 2020年5月        2020-05-11
        type: String,
        required: false,
        default: "YYYY-MM-DD"  // YYYY-MM-DD eg:2020年-5-30      words eg: 2020年5月        year eg: 2020年
      },
      iconType:{ // 图标类型
        type: String,
        required: false,
        default: "icon"  // icon------<>   yearIcon ----------《》
      }
    },
    data(){
      return{
        getDate: this.type==='YYYY-MM-DD'? moment(this.date).format("YYYY-MM-DD"):this.type==='year'?  moment(this.date).format("YYYY年"): moment(this.date).format("YYYY年M月") ,
        disabledPrevCurrent: this.disabledPrev,
        disabledNextCurrent: this.disabledNext,
        getWeek: this.week
      }
    },
    watch:{
      week: {
        handler (n) {
          if (n) {
           console.log(n,'fffffffffff')
            this.getWeek = n
          }
        },
        deep: true,
        immediate: true
      },
      date: {
        handler (n) {
          if (n) {
            this.getDate =this.type==='YYYY-MM-DD'? moment(n).format("YYYY-MM-DD"):this.type==='year'?  moment(n).format("YYYY年"): moment(n).format("YYYY年M月")
          }
        },
        deep: true,
        immediate: true
      },
      disabledPrev: {
        handler (n) {
          console.log(n)
          this.disabledPrevCurrent = n
        },
        deep: true,
        immediate: true
      },
      disabledNext: {
        handler (n) {
          this.disabledNextCurrent = n
        },
        deep: true,
        immediate: true
      }
    },
    methods:{
      /** 年 月  日期转换方法 */
      dateChange(val){
        const str = val.substr(0,val.length-1)
        const year = str.substr(0,4)
        let nowDate = ''
        if(str.length>4){
          var month = str.substr(5,str.length-1)
          if(month.length<2){
            month = '0'+month
          }
          nowDate = year + '-' + month
          // console.log(nowDate,'g333ggg')
          return nowDate
        }else{
          nowDate = year
          return nowDate
        }
      },
      /** 日期向前翻 */
      leftClick(){
        if(this.isWeek){
          let arr = [],sendArr=[]
          const start = moment(moment(this.getWeek[0]).subtract(7, 'd')).format('YYYY-MM-DD')
          const end =  moment(moment(this.getWeek[1]).subtract(7, 'd')).format('YYYY-MM-DD')
          arr.push(start)
          arr.push(end)
          this.getWeek = [...arr]
          const sendStart = moment(start).format()
          const sendEnd = moment(end).format()
          sendArr.push(sendStart)
          sendArr.push(sendEnd)
          this.$emit("leftClick", sendArr)
        }
        if(this.type==='YYYY-MM-DD'){
          this.getDate = moment(this.getDate).subtract(1, 'days').format('YYYY-MM-DD') // 获取前一天
          this.$emit("leftClick", moment(this.getDate).format())
        }else if(this.type==='year'){
          const date = this.dateChange(this.getDate)
          this.getDate = moment(date).subtract(1, 'year').format("YYYY年") // 获取后一天
          this.$emit("leftClick", moment(this.dateChange(this.getDate)).format())
        } else{
          const date = this.dateChange(this.getDate)
          this.getDate = moment(date).subtract(1, 'months').format("YYYY年M月") // 获取后一天
          this.$emit("leftClick", moment(this.dateChange(this.getDate)).format())
        }
      },
      /** 日期向后翻 */
      rightClick(){
        if(this.isWeek){
          let arr = [],sendArr=[]
          const start = moment(moment(this.getWeek[0]).add(7, 'd')).format('YYYY-MM-DD')
          const end =  moment(moment(this.getWeek[1]).add(7, 'd')).format('YYYY-MM-DD')
          arr.push(start)
          arr.push(end)
          this.getWeek = [...arr]
          const sendStart = moment(start).format()
          const sendEnd = moment(end).format()
          sendArr.push(sendStart)
          sendArr.push(sendEnd)
          this.$emit("rightClick", sendArr)
        }
        if(this.type==='YYYY-MM-DD') {
          this.getDate = moment(this.getDate).add(1, 'days').format('YYYY-MM-DD') // 获取后一月
          this.$emit("rightClick", moment(this.getDate).format())
        }else if(this.type==='year'){
          const date = this.dateChange(this.getDate)
          this.getDate = moment(date).add(1, 'year').format("YYYY年") // 获取后一天
          this.$emit("rightClick", moment(this.dateChange(this.getDate)).format())
        }else{
          const date = this.dateChange(this.getDate)
          this.getDate = moment(date).add(1, 'months').format("YYYY年M月") // 获取后一月
          this.$emit("rightClick", moment(this.dateChange(this.getDate)).format())
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.c-date{
  button{
    border: none;
    padding: 0 6px;
    cursor: pointer;
    background: transparent;
    &:hover {
      color: #4096FF;
    }
    &:disabled{
      color: #C0C4CC;
      background-color: #fff;
      cursor: not-allowed;
    }
  }
  .btn-prev,.btn-next{
    background-color: #fff;
    margin: 0;
    color: #303133;
    outline: none;
  }
  .btn-prev{
    padding-right: 12px;
  }
  .btn-next{
    padding-left:12px;
  }

  .ai-icon{
    font-size:18px;
    &:hover{
      //color:blue;
    }
  }
  .fontColor{
    color: #4096FF;
  }
  .dateFont{
    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select:none;
    -khtml-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
  }
}
</style>

属性归纳：

属性	说明	默认值	数据类型	可选值
date	显示的时间，非范围类型	当前系统时间new Date()	String,Object,Date	传入格式可以是date类型，或者字符串类型"2018-06-18"
type	日期格式eg:2020年-5-30或eg: 2020年5月	YYYY-MM-DD	String	YYYY-MM-DD 或 words
iconType	图标类型<>或《》	icon	String	icon或 yearIcon （年翻页）
disabledPrev	左边按钮是否禁用	false	Boolean	true或false
disabledNext	右边按钮是否禁用	false	Boolean	true或false
isWeek	是否是周范围	false	Boolean	true或false
week	周范围时间	当前周的范围	Array	自定义一周范围，传入格式可以是date类型，或者字符串类型[“2020-06-15”,“2020-06-21”]

事件说明：

事件名	说明
leftClick	点击左侧按钮触发事件
rightClick	点击右侧按钮触发事件

去具体界面使用：

<!-- 日期组件   -->
    <h3>xx年xx月</h3>
    <div style="padding:0 20px 20px;">
      <myDate type="words"></myDate>
      左边禁用
      <myDate disabledPrev type="words"></myDate>
      右边禁用
      <myDate disabledNext type="words"></myDate>
    </div>

    <h3>xx年xx月考核</h3>
    <div style="padding:0 20px 20px;">
      <myDate date="2010-09" type="words"><slot><span>考核</span></slot></myDate>
    </div>

    <h3>xxxx-xx-xx</h3>
    <div style="padding:0 20px 20px;">
      <myDate date="2020-09-18"></myDate>
    </div>

    <h3>xxxx年</h3>
    <div style="padding:0 20px 20px;">
      <myDate type="year" date="2024" iconType="yearIcon"></myDate>
    </div>

    <h3>xxxx-xx-xx 至 xxxx-xx-xx</h3>
    <div style="padding:0 20px 20px;">
      当前周
      <myDate isWeek @leftClick = "leftClick"></myDate>
      传任意周一至周末整周
      <myDate :week="week" isWeek ></myDate>
    </div>

 import myDate from '@/components/myDate'
data(){
      return{
        week:['2020-06-15','2020-06-21'] // 传周一开始到周日结束的周期范围
      }
    },
    methods:{
      leftClick(val){
        console.log(val,'ggeeeeeeeeeee')
      },
   }