How to change react-dates input border color?

Question

How can I change react-dates input border color depending on a component state?

I want to set the input border to red when there is an error on my form and the normal color when everything is ok.

I'm looking for this but I can't find it.

I'm in version 20.2.0

Edit:

I want to do something like this

<SingleDatePicker
    {...otherProps}
    styles={{border: '1px solid red'}}
/>

But I can't do that because react-dates don't provide a styles or className prop. Also, overriding the css don't work, because I need to togle the style, not just change it once.

I can't add code or show effort. `react-dates` don't provide a `styles` or `className` prop, so I have no idea on how to change the style depending on a variable — Vencovsky, May 17 '19 at 23:58

Nate Holloway · Answer 1 · 2020-10-19T16:24:11.140

3

Override the CSS:

.error .SingleDatePicker .DateInput_input {
  border: 1px solid #bf2155;
}

Use a div around the component with a validation state:

<div className={this.props.value ? null : 'error'}>
  <SingleDatePicker/>
</div>

edited Oct 19 '20 at 16:24

answered Oct 19 '20 at 15:45

Nate Holloway

31
4

This was a life-saver. I was looking to change border of DatePicker from many hours. However, for me the reverse of above worked.
– Anil_M Dec 12 '20 at 00:26

Anil_M · Answer 2 · 2020-12-12T00:40:48.980

Adding to Nate's answer,

I did need to change different react-datepicker class than @nate stated in order to get the border to change on errors/no-input.

May be related to react & react-datepicker & formic packager version (listed below).

"react": "^17.0.1",
"react-datepicker": "^3.3.0",
"react-dom": "^17.0.1",
"react-formik-ui": "^5.0.2",

CSS Override

.picker-error .react-datepicker__input-container input {
    border: 1px solid red;
  }

Component Override

<div className={props.errors.startDate && props.touched.startDate ? 'picker-error' : null}>
<DatePicker
 ....
 ....
>
</div>

How to change react-dates input border color?

Edit:

2 Answers2