Reputation: 1168
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'));
Upvotes: 10
Views: 31273
Reputation: 702
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
Upvotes: 1
Reputation: 163
@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;
}
}
}
Upvotes: 2
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