关于ant Design日历单元格自定义头部问题

前端练习kun

已于 2022-08-08 10:47:11 修改

阅读量1.5k

点赞数 2

文章标签： servlet javascript 前端

于 2022-08-08 10:43:02 首次发布

本文链接：https://blog.csdn.net/weixin_59749798/article/details/126223015

版权

这个是antd默认自带的头部，但是有的需求是需要进行一些整改的，却无法下手，具体操作如下

headerRender这个属性是Calendar自带的可编辑日历头部的功能用件，但要清楚，如果使用头部会全部消失，只能自己定义，接下来代码附上

<Calendar
               headerRender={({ value, type, onChange, onTypeChange }) => {
                 const start = 0;
                 const end = 12;
               const monthOptions = [];

               const current = value.clone();
                 const localeData = value.localeData();
                const months = [];
                 for (let i = 0; i < 12; i++) {
                  current.month(i);
                   months.push(localeData.monthsShort(current));
                 }

                for (let index = start; index < end; index++) {
                   monthOptions.push(

<Select.Option className="month-item" key={`${index}`}>

{months[index]}

</Select.Option>

);

}

const month = value.month();

const year = value.year();

const options = [];

for (let i = 2019; i < year + 10; i += 1) { //我这里是需要最前2019年，所以设置2019

options.push(

<Select.Option key={i} value={i} className="year-item">

{i}

</Select.Option>

);

}

/* 上个月可直接调用 */

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);

console.log(1);

};

/* 上一天 */

const preaDays = () => {

let oldDays = moment(value).subtract(1, 'days');

onChange(oldDays);

};

/* 下一天 */

const nextDays = () => {

let newDays = moment(value).add(1, 'days');

onChange(newDays);

};

return (

<Col>

<Select

size="small"

dropdownMatchSelectWidth={false}

className="my-year-select"

onChange={newYear => {

const now = value.clone().year(newYear);

onChange(now);
                           }}
                           value={String(year)}
                         >
                          {options}
                         </Select>
                       </Col>
                      <div>
                    <span onClick={prev}>
                        <Icon type="left" /> //点击到上个月
                      </span>
                        <span onClick={showTotay}>今天</span>
                      <span onClick={next}>
                        <Icon type="right" /> //点击到下个月
                    </span>
                    </div>
                </Row>
                  </div>
              );
               }}
            />