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>
              )
            }}
           
          />
    
  • 相关阅读:
    纠结
    oracle大批量数据更新
    SQL Server 2008 “因为数据库正在使用,所以无法获得对数据库的独占访问权”解决方法
    面试总结
    Oracle 存储过程发送邮件
    ASP.NET页面之间传递值的几种方法<转>
    模式窗口里面,服务器控件添加确认操作时,又弹出新窗口
    深入研究Asp.net页面的生命周期<转>
    asp.net用jquery为服务器控件添加javascript处理
    sqlserver 把对象发布成webservice遇到的问题
  • 原文地址:https://www.cnblogs.com/ljh--/p/13984085.html
Copyright © 2011-2022 走看看