zoukankan      html  css  js  c++  java
  • 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>
              )
            }}
           
          />
    
  • 相关阅读:
    JSOI2018 战争(凸包+闵可夫斯基和)
    树结构
    Emacs奇技淫巧
    概率期望
    动态DP
    无旋treap大法好
    玩NOILinux
    <虚树+树型DP> HNOI2014世界树
    <虚树+树型DP> SDOI2011消耗战
    日志系统升级之路(.Net客户端的使用)
  • 原文地址:https://www.cnblogs.com/ljh--/p/13984085.html
Copyright © 2011-2022 走看看