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>
          )
        }}
       
      />


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM