Search code examples
javascripthtmlcssreactjsantd

Customizing weekend using css

I am using antd DatePicker for date range purposes.

How can I style the days that are sundays using css. Help will be appreciated

edit:

I am getting this blue background between start , range and the end. I want that to be continous. Also there is gap between selected rows, I want it to be purple itself. But here I see white color between selected rows

enter image description here

import React from "react";
import "./styles.css";
import { DatePicker } from "antd";
import "antd/dist/antd.css";
import { ConfigProvider } from "antd";
import en_GB from "antd/lib/locale-provider/en_GB";
import moment from "moment";
import "moment/locale/en-gb";
moment.locale("en-gb");

const { RangePicker } = DatePicker;

export default function App() {
  return (
    <div className="App">
      <br />
      <ConfigProvider locale={en_GB}>
        <RangePicker />
      </ConfigProvider>
    </div>
  );
}

Sandbox: https://codesandbox.io/s/black-breeze-6gmz85?file=/src/App.js:0-511

Solution

  • You could use nth-child selector to isolate the sunday column and style as desired.

    .ant-picker-content tr td:nth-child(7) {
  background: #eee;
}

    To remove the padding just change css to:

    .ant-picker-cell {
  padding: 0;
}