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>
              )
            }}
           
          />
    
  • 相关阅读:
    git/gerrit上已经删除了远程分支,本地仍然能看到的解决方法
    bat中查找文件夹下有几个某类型的文件
    ERROR 1045 (28000)问题解决
    Unsupervised Pretraining Transfers well Across Languages
    由声学特征重建语音波形-声码器的最近进展
    神经机器翻译中有用的技巧
    多语种神经机器翻译
    利用Fairseq训练新的机器翻译模型
    转:Linux 系统忘记密码 -> 修改 Ubuntu 虚拟机密码
    Linux安装与配置Tomcat
  • 原文地址:https://www.cnblogs.com/ljh--/p/13984085.html
Copyright © 2011-2022 走看看