ant design calendar 增加箭头切换 点击今日切换

<Calendar
        fullscreen={false}
        headerRender={({ value, onChange }) => {
          getCurrentDate(moment(value).format('YYYY-MM-DD'), getWeek(value))
          let currentYear = value.format('YYYY')
          let currentMonth = value.format('MM')
            
          //   控制今日按钮是否显示  面板选中今日时不显示按钮 反之 显示按钮 点击并跳转到今日
          if (
            moment(value).format('YYYY-MM-DD') ===
            moment(new Date()).format('YYYY-MM-DD')
          ) {
            showTodayBtn = false
          } else {
            showTodayBtn = true
          }

          // 上月 --------     <
          const prev = () => {
            let newMonth = moment(value).subtract(1, 'months')
            onChange(newMonth)
            // console.log('newMonth', newMonth)
          }
          // 下月 --------     >
          const next = () => {
            let newMonth = moment(value).add(1, 'months')
            onChange(newMonth)
            // console.log('newMonth', newMonth)
          }
          //上一年 --------     《
          const prevYear = () => {
            let newYear = moment(value).subtract(1, 'years')
            onChange(newYear)
          }
          //上一年 --------     》
          const nextYear = () => {
            let newYear = moment(value).add(1, 'years')
            onChange(newYear)
          }
         // 显示今天
          const showTotay = () => {
            let today = moment(new Date())
            onChange(today)
          }

          return (
            <div>
              <div className={cx('header-day')}>
                {showTodayBtn && (
                  <Button
                    className={cx('header-day-btn')}
                    onClick={() => showTotay()}
                  >
                    今日
                  </Button>
                )}
              </div>
              <div className={cx('picker-header')}>
                <span
                  className={cx('super-prev-btn')}
                  onClick={() => prevYear()}
                >
                  <SvgIcon
                    iconName={'_ic_generallineleftshuangjiantou'}
                  ></SvgIcon>
                </span>
                <span className={cx('prev-btn')} onClick={() => prev()}>
                  <SvgIcon iconName={'_ic_generallineleft'}></SvgIcon>
                </span>
                <div className={cx('picker-header-view')}>
                  <span>{currentYear}年</span>
                  <span>{currentMonth}月</span>
                </div>
                <span className={cx('next-btn')} onClick={() => next()}>
                  <SvgIcon iconName={'_ic_generallineright'}></SvgIcon>
                </span>
                <span
                  className={cx('super-next-btn')}
                  onClick={() => nextYear()}
                >
                  <SvgIcon
                    iconName={'_ic_generallineleftshuangjiantou'}
                  ></SvgIcon>
                </span>
              </div>
            </div>
          )
        }}
       
      />
posted @ 2020-11-16 10:57  归远  阅读(1116)  评论(1编辑  收藏  举报