• 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>
              )
            }}
           
          />
    
  • 相关阅读:
    面对对象1
    php数组
    操作字符串,正则表达式
    php运算符and函数
    sql 数学函数and字符串函数and日期函数
    高级查询
    简单查询
    php环境搭建
    第三阶段项目错误记录
    thinkphp获取刚添加数据的主键值
  • 原文地址:https://www.cnblogs.com/ljh--/p/13984085.html
Copyright © 2020-2023  润新知