How I can change color of input selected in react-date-range package?

Question

I Cant custom with css background color of focusing input selected in this date picker pack

Answer 1

If you only want to change the primary selected range color

And have no luck using their color prop for DateRange

Try this:

rangeColors={["#5569ff"]} //put your color here

Here is an example:

<DateRange
  editableDateInputs={true}
  onChange={item => setDatesSelect([item.selection])}
  moveRangeOnFirstSelection={false}
  ranges={datesSelect}
  rangeColors={["#5569ff"]} //put your color here
/>

Answer 2

An example of my component DateRange, change only property rangeColors={['#f33e5b', '#3ecf8e', '#fed14c']}

you need to pass the three values ​​in the array

<DateRange
          editableDateInputs={true}
          onChange={item => setDate([item.selection])}
          moveRangeOnFirstSelection={false}
          ranges={date}
          className={styles.date}
          locale={locales[locale]}
          date={date}
          endDatePlaceholder="Continuo"
          rangeColors={['#f33e5b', '#3ecf8e', '#fed14c']}
        />
      </div>

Answer 3

This is the demo code of react-daterange-picker in codesandbox, you can easily find the corresponding style information Screenshots

Answer 4

you should copy Styles @wojtekmaj/react-daterange-picker/dist/DateRangePicker.css and react-calendar/dist/Calendar.css to your project.

use the no style option like this:

import { useState } from 'react';
import DateRangePicker from '@wojtekmaj/react-daterange-picker/dist/entry.nostyle';

import './App.css';
import './Calendar.css';
import './DateRangePicker.css';

function App() {
  const [value, onChange] = useState([new Date(), new Date()]);

  return (
    <div>
      <DateRangePicker
        onChange={onChange}
        value={value}
      />
    </div>
  );
}

export default App;

and add to DateRangePicker.css:

.react-daterange-picker__inputGroup__input:focus {
  background: red;
}