cssreactjstailwind-cssantdant-design-pro

Customise ANTD Date picker in react


enter image description here

Hello I'm building a form component but for date picker i want to use date picker of ant design, so i customizing my date picker component, but it's blue outline is not being changed, that blue outline is visible when hover or when i focus on field, Also help me if i can change color of other part like that "Today" color in calendar

Here is my code I used tailwind css i want that border or it's outline to be of black

import React from "react";
import { DatePicker } from 'antd';

const DatePickers = (props) => {
  const { formik, title, name, Icon, minDate, maxDate } = props;

  return (
    <div className="mb-2">
      <span className="flex">
        {Icon}
        <label
          htmlFor={name}
          className="block text-sm font-semibold text-textPrimary dark:text-dark_textPrimary"
        >
          {title}
        </label>
      </span>
      <span className="flex w-full">
        <DatePicker
          type="date"
          name={name}
          bordered={true}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          placeholder={title}
          min={minDate} 
          max={maxDate}
          className={`block w-full px-4 py-2 mt-2 text-textPrimary dark:text-dark_textPrimary bg-background  focus:border-black focus:outline-black dark:bg-dark_background border-2 rounded-md focus:ring-0 ring-0 border-cardBorder dark:border-dark_cardBorder 
            ${
            formik.touched[name] && formik.errors[name]
              ? "border-error_red placeholder-error_red"
              : "outline-cardBorder dark:outline-dark_cardBorder "
              }
        `}
        />
      </span>
      {formik.touched[name] && formik.errors[name] && (
        <h3 className="text-xs text-error_red">{formik.errors[name]}</h3>
      )}
    </div>
  );
};

export default DatePickers;

Solution

  • This blue line or Today blue color is inherited from ConfigProvider theme, token.colorPrimary to be more specific. Changing this color prop you'll change your whole app primary color.

    If you want to change only datepicker color specific you should then change components.DatePicker color props. You can see all available changeable options, test and preview changes inside theme editor.

    Or, in worse case, you can change these styles using css classes. In this case you'll need to use dev console to search for the class you'll want to change.