0

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

Djamel Neguez
  • 11
  • 1
  • 4
  • Please provide enough code so others can better understand or reproduce the problem. – Community Sep 30 '21 at 19:03
  • Please improve the question by choosing the appropriate tag (react-date-picker) which you mentioned using in a comment on the selected answer – eliastouil Nov 27 '21 at 18:17

4 Answers4

1

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;
}

enter image description here

stasdes
  • 669
  • 3
  • 10
  • thanks for your answer but i have problem in react-date-range package not react-daterange-picker – Djamel Neguez Sep 23 '21 at 09:48
  • This should be the correct answer, it does not matter which library you're using, as long as you copy the styles and change them, it will work out. Also prefix all the classes with a class name else it won't work – Elpis Apr 23 '23 at 07:50
1

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>
AlanHusjy
  • 11
  • 2
0

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

Przeblysk
  • 24
  • 4
  • thanks for your answer but i have problem in react-date-range package not react-daterange-picker if you have any other package give here name – Djamel Neguez Sep 23 '21 at 09:49
  • [https://github.com/hypeserver/react-date-range](react-date-range) color(Calendar) Property You can find it in the Options section of README.md – Przeblysk Sep 23 '21 at 09:54
  • thanks it's working for me , add table of colors in rangeColors={['#6EA03E','#3e6ea0']} – Djamel Neguez Sep 23 '21 at 10:13
0

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
/>
tyler_flx
  • 11
  • 1