Kevin Powell - Community•2y ago

How change color react-date-range (solved)

I use dependency react-date-range I want change color to red (for example) how I can achieve it? https://codesandbox.io/p/sandbox/ecstatic-cohen-pmw79g?file=%2F.gitignore%3A1%2C1 SOLUTION: add color={'red'}

 <div className='flex justify-center items-center'>
      <div className='calendarWrap' ref={dropdownRef}>
        <input className='inputBox outline-none' value={calendar} readOnly onClick={() => setOpen(open => !open)} />
        <Calendar className={`calendarElement ${open ? 'dropdown-calendar-active' : 'dropdown-calendar-inactive'}`}
          onChange={handleSelect} color={'red'} date={new Date()} />
      </div>
    </div>

 <div className='flex justify-center items-center'>
      <div className='calendarWrap' ref={dropdownRef}>
        <input className='inputBox outline-none' value={calendar} readOnly onClick={() => setOpen(open => !open)} />
        <Calendar className={`calendarElement ${open ? 'dropdown-calendar-active' : 'dropdown-calendar-inactive'}`}
          onChange={handleSelect} color={'red'} date={new Date()} />
      </div>
    </div>

16 Replies

Jochem•2y ago

the various color options in the documentation don't do what you want? https://www.npmjs.com/package/react-date-range

npm

react-date-range

A React component for choosing dates and date ranges.. Latest version: 1.4.0, last published: 2 years ago. Start using react-date-range in your project by running npm i react-date-range. There are 326 other projects in the npm registry using react-date-range.

Jochem•2y ago

The default values for rangeColors seem to match the RGB values in your screenshot, and the color seems to be the same as well: https://github.com/hypeserver/react-date-range/blob/master/src/components/DateRange/index.js line 153 So all you'd have to do is use that rangeColors option like described in the docs for the package you're using