• 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>
              )
            }}
           
          />
    
  • 相关阅读:
    Toad 常用快捷键
    Oracle Form删除list项
    不得重新使用的登录口令
    OE_ORDER_PUB.PROCESS_ORDER to Release a hold on sales order in R12
    OE_ORDER_PUB.PROCESS_ORDER to Apply hold on a sales order
    说明性弹性域段
    使用VPD解决EBS中信息屏蔽问题
    Oracle EBS客户化程序中格式化金额
    Form开发中组件控制的几个常用方法
    .Net的差评
  • 原文地址:https://www.cnblogs.com/ljh--/p/13984085.html
Copyright © 2020-2023  润新知