Lusha Li
Lusha Li

Reputation: 1168

How to customize the style in react-datepicker?

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

Edit 8nm3x4y300

Upvotes: 10

Views: 31273

Answers (3)

Sergii Tanchenko
Sergii Tanchenko

Reputation: 702

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

  1. Create an scss file with variables: variables.scss

    $datepicker__font-size: 1rem;

  2. Import variables file and datepicker.scss file from node-modules:

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

  3. 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

Upvotes: 1

shrijan tripathi
shrijan tripathi

Reputation: 163

  • 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.

Upvotes: 2

Mohammad Ansari
Mohammad Ansari

Reputation: 1539

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

Upvotes: 1

Related Questions