首页 > 解决方案 > 如何在 ant design datapicker 中为特定日期自定义日期颜色?

问题描述

我有一个带有日期和颜色的对象,应该在其中绘制当前日期。ant design中如何用datepicker中的日期判断当前日期。当我尝试在 dateRender 方法中获取当前月份时,我得到了此选项卡上的所有月份。

我的代码:

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { DatePicker, Space } from "antd";
import moment from "moment";

const dateFormat = "YYYY-MM-DD";

const data = [{ date: "2021-05-02", color: "green" }];

ReactDOM.render(
  <Space direction="vertical" size={12}>
    <DatePicker
      format={dateFormat}
      dateRender={(current) => {
        let day = moment(data[0].date).format("DD");
        let month = moment(data[0].date).format("MM");
        console.log(current.month()); //instead 5 I get 4,5 and 6 
        const style = {};
        if (
          current.date() === Number(day) &&
          current.month() === Number(month)
        ) {
        
          style.border = "1px solid #1890ff";
          style.borderRadius = "50%";
          style.backgroundColor = data[0].color;
        }
        return (
          <div className="ant-picker-cell-inner" style={style}>
            {current.date()}
          </div>
        );
      }}
    />
  </Space>,
  document.getElementById("container")
);

那么我怎样才能获得正确的当前安装量?

标签: reactjsantd

解决方案


推荐阅读