How to customize the style in react-datepicker?

Question

I want to change the style of react-datepicker:

1.change the input box to a customized style

2.change the style and the language of the calendar

I saw a post (Custom Input Field on datepicker, [react-datepicker components] https://github.com/Hacker0x01/react-datepicker/blob/master/docs/datepicker.md) talking about replacing the whole component. Can I edit the style directly without writing a new component? If yes, how can I achieve this? Moreover, I have no clue how to change the calendar. How can I find out which component should I change?

import React, {Component} from 'react';
import {render} from 'react-dom';

import moment from 'moment';

import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

const Input = ({onChange, placeholder, value, isSecure, id, onClick}) => (
    <input
        style={{backgroundColor:"black"}}
        onChange={onChange}
        placeholder={placeholder}
        value={value}
        isSecure={isSecure}
        id={id}
        onClick={onClick}
    />
);

const NoClickInput = ({onClick, ...props}) => <Input {...props} />;

class App extends Component {
    state = {
        startDate: moment(),
        endDate: moment()
    };

    render() {
        const {startDate, endDate} = this.state;
        return (
            <div>
                <div>Start:</div>
                <DatePicker
                    selected={startDate}
                    selectsStart
                    startDate={startDate}
                    endDate={endDate}
                    onChange={date=>this.setState({startDate})}
                />
                <div>End:</div>
                <DatePicker
                    selected={endDate}
                    selectsEnd
                    startDate={startDate}
                    endDate={endDate}
                    onChange={date => this.setState({ endDate })}
                />
            </div>
        );
    }
}

render(<App />, document.getElementById('root'));

score 2 · Answer 1 · answered Sep 02 '20 at 18:18

import the sass file from node_modules
override the classes

@import 'node_modules/react-datepicker/src/stylesheets/datepicker.scss';

.react-datepicker__month-container {
  background-color: #081833;
  color: #969eac;
  font-size: 1rem;
  font-family: 'Mulish';

  .react-datepicker__month {
    padding: 1rem 0;
  }

  .react-datepicker__month-text {
    display: inline-block;
    width: 5rem;
    margin: 0.5rem;
    font-size: 1rem;
    padding: 0.2rem;
    &:hover {
      background-color: #534cea;
    }
  }

  
}

use sass file or compile it to css and use it.

score 1 · Answer 2 · answered Dec 31 '18 at 20:08

1

Hi You need to create your custom css stylesheet and import it in the react

Also try using !important in css codes for applying your custom stylesheet over default styles

answered Dec 31 '18 at 20:08

Mohammad Ansari

1,076
1
11
22

score 1 · Answer 3 · answered Apr 23 '21 at 13:57

For simple style changes like font, font-size, or colors, I suggest simply override default scss-variables of react-datepicker. For example:

Create an scss file with variables: variables.scss

$datepicker__font-size: 1rem;
Import variables file and datepicker.scss file from node-modules:

@import 'variables.scss';
@import 'node_modules/react-datepicker/src/stylesheets/datepicker.scss';
Compile to css. The new value should replace the default value $datepicker__font-size: 0.8rem !default;

A full list of variables can be found: node_modules/react-datepicker/src/stylesheets/variables.scss

How to customize the style in react-datepicker?

3 Answers3

Linked