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

最新推荐文章于 2023-12-02 17:52:25 发布

原创

最新推荐文章于 2023-12-02 17:52:25 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一款日期导航组件的设计与实现细节，该组件通过左右按钮帮助用户快速切换查看不同时间范围的数据，包括年、月、周和日。文章详细展示了如何使用Vue.js和Moment.js来动态更新日期显示，并提供了完整的代码示例。

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

<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:{

最低0.47元/天解锁文章