How can I style react-datepicker?

Question

I'm using webpack, react-datepicker and have managed to import its css with the provided css module.

import 'react-datepicker/dist/react-datepicker-cssmodules.css

The component looks fine and dandy, but now I want to make it full width like the time element above it.

Looking at the CSS, what it needs is for the react-datepicker-wrapper element that gets dynamically added by the library to have display: block. Any modifications I make to react-datepicker-wrapper in my own css does nothing.

What should I do?

date-picker.component.jsx

import React from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker-cssmodules.css';
import './date-picker.component.bootstrap.css';

// eslint-disable-next-line no-confusing-arrow
const buildClassNames = (touched, isInvalid) =>
touched && isInvalid ? 'form-control is-invalid' : 'form-control';

export const DatePickerBootstrap = (props) => {
  const { setFieldValue, setFieldTouched, errors, touched } = props;
  const { name, value, label, ...rest } = props;

  return (
<div className="form-group">
    <label className='datePickerLabel' htmlFor={name}>{label}</label>
    <DatePicker
    selected={value}
    onChange={(e) => {
      setFieldValue(name, e);
      setFieldTouched(name);
    }}
    className={buildClassNames(touched, !!errors)}
    customInput={
        <input
        type="text"
        id={name}
        placeholder={label} />
    }
    {...rest}
    />

    <div className="invalid-feedback">
        {errors}
    </div>
</div>
  );
};

export default DatePickerBootstrap;

This isn't really a React or date-picker question. It's simply about CSS specificity. What rule are you trying to override? — isherwood, Apr 22 '19 at 13:29
I think as its using CSS Modules, it just ignores any CSS I give to it. Thats really the issue. I'm not sure how you override 3rd party CSS module styling — Sebastian Patten, Apr 22 '19 at 19:35
I asked what the rule is. That would clear some things up. Show the actual CSS that's being applied to the element, please. — isherwood, Apr 22 '19 at 20:01
@SebastianPatten did you get the `invalid-feedback` div to work? I'm doing something similar and the className adjustment to the inner form-control input does not override the `display: none` style like it does in standard bootstrap examples where the two elements are peers. — Rake36, Sep 30 '19 at 00:39

score 21 · Answer 1 · answered Jan 20 '21 at 06:46

From https://github.com/Hacker0x01/react-datepicker/issues/2099#issuecomment-704194903

Try with wrapperClassName property:

<DatePicker wrapperClassName="datePicker" dateFormat="dd/MM/yyyy" />

CSS:

.datePicker {
  width: 100%;
}

This way you won't modify the styles for the whole app

styled-components bonus:

import React from 'react';
import styled, { css, createGlobalStyle } from 'styled-components';
import DatePicker from 'react-datepicker';

const DatePickerWrapperStyles = createGlobalStyle`
    .date_picker.full-width {
        width: 100%;
    }
`;

<>
  <DatePicker wrapperClassName='date_picker full-width' />
  <DatePickerWrapperStyles />
</>

score 20 · Answer 2 · answered Apr 22 '19 at 13:35

I think you're just missing some CSS. Try this in your custom stylesheet (anywhere after the datepicker's stylesheet):

.react-datepicker-wrapper,
.react-datepicker__input-container,
.react-datepicker__input-container input {
    display: block;
    width: 100%;
}

Demo

VladGalko · Answer 3 · 2021-04-29T17:21:41.890

styled-components

<>
  <DatePickerWrapper  
    popperContainer={Popper}
    calendarContainer={Calendar} 
  />
</>

const DatePickerWrapper = styled(({ className, ...props }) => (
  <DatePicker {...props} wrapperClassName={className} />
))`
  width: 100%;
`;

const Calendar = styled.div`
  border-radius: 10px;
  box-shadow: 0 6px 12px rgba(27, 37, 86, 0.16);
  overflow: hidden;
`;

const Popper = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
`;

score 2 · Answer 4 · answered Apr 22 '19 at 13:26

2

You can get your css work by putting !important at the end of the lines:

display: block !important;

And, you should import your css file at the end:

import 'library0.css';
import 'library1.css';
import 'library2.css';
import 'yourCss.css'; // Your css

answered Apr 22 '19 at 13:26

Burak Gavas

1,304
1
9
11

2

That doesn't seem to have an effect on the input's size, and `!important` should always be a last resort. – isherwood Apr 22 '19 at 13:36
1

order of importing the css files matters a lot. placing the custom css at the end overrides the css defined in the library files - this works for me. using '!important' should never be the approach to adopt. – Rohit Mitta Mar 13 '20 at 11:03

score 2 · Answer 5 · answered Apr 22 '19 at 13:41

2

overwrite the default css like

.react-datepicker__input-container input {
   width: 100%;
}

working example

answered Apr 22 '19 at 13:41

Junius L

15,881
6
52
96

You missing this line on working example: import "react-datepicker/dist/react-datepicker.css"; – NoloMokgosi Nov 05 '20 at 10:00

Alohe · Answer 6 · 2022-08-28T14:18:51.673

You can use the class of each element of the picker to override its default style, using the inspect tool you can identify each element's class, if your new style won't be applied you can use the !important property to override the default style

The following code is applied to most of the pickers elements

.react-datepicker__triangle {
  display: none;
}

.react-datepicker__day.react-datepicker__day--keyboard-selected {
  border: none;
  border-radius: 7px;
  background-color: var(--dark);
  color: var(--white);
}

.react-datepicker__day.react-datepicker__day--keyboard-selected:hover {
  border: none;
  border-radius: 7px;
  background-color: var(--dark);
  color: var(--white);
}

.react-datepicker-popper .react-datepicker__navigation {
  padding-top: 12px;
  color: #000;
}

.react-datepicker {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.189);
  border: none !important;
  font-family: "Inter" !important;
}

.react-datepicker__header {
  border-bottom: solid 5px var(--light) !important;
  background: white !important;
}

.react-datepicker__current-month {
  color: var(--dark) !important;
}

.react-datepicker__day.react-datepicker__day--today {
  border-radius: 7px;
  border: solid 2px var(--brand) !important;
  background-color: white !important;
  color: var(--dark) !important;
  width: 30px;
  height: 30px;
}

.react-datepicker__day.react-datepicker__day--selected {
  border: none;
  border-radius: 7px;
  background-color: black;
  color: white;
}

.react-datepicker__day--selected:hover,
.react-datepicker__day--in-selecting-range:hover,
.react-datepicker__day--in-range:hover,
.react-datepicker__month-text--selected:hover,
.react-datepicker__month-text--in-selecting-range:hover,
.react-datepicker__month-text--in-range:hover,
.react-datepicker__quarter-text--selected:hover,
.react-datepicker__quarter-text--in-selecting-range:hover,
.react-datepicker__quarter-text--in-range:hover,
.react-datepicker__year-text--selected:hover,
.react-datepicker__year-text--in-selecting-range:hover,
.react-datepicker__year-text--in-range:hover {
  border: none;
  border-radius: 7px !important;
  background-color: var(--brand) !important;
  color: var(--dark) !important;
}

thank you @alohe! Is there any documentation on this that you know of? — fotoflo, Oct 26 '22 at 00:39
No, I just identified the CSS properties using chrome dev tools and started editing it, — Alohe, Oct 27 '22 at 05:43

score 1 · Answer 7 · answered Aug 28 '23 at 05:39

          <DatePicker
            className='form-control form-control-solid w-250px '
            selected={startDate}
            onChange={onChange}
            selectsRange
            startDate={startDate}
            endDate={endDate}
            isClearable={true}
          />

score 0 · Answer 8 · answered Sep 23 '21 at 10:59

You can put it inside a flexbox.

If you are using bootstrap, you can use the d-flex and flex-column classes on the wrapper element.

<div className="d-flex flex-column">
    <DatePickerField name="date" label="Date" />
</div>

If not, you can style the wrapper using CSS properties.

<div className="date-picker-wrapper">
    <DatePickerField name="date" label="Date" />
</div>

CSS:

.date-picker-wrapper {
    display: flex !important;
    flex-direction: column !important;
}

score 0 · Answer 9 · answered Jul 14 '22 at 14:40

You can add to the style sheet:

.react-datepicker__input-container{
  input{
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none;
}

}

Output

score 0 · Answer 10 · answered Dec 02 '22 at 11:44

0

From https://github.com/Hacker0x01/react-datepicker/issues/2099#issuecomment-704194903

Try

<DatePicker calendarClassName={/* styles */}></DatePicker>

answered Dec 02 '22 at 11:44

Fred

182
1
22

How can I style react-datepicker?

10 Answers10

styled-components bonus:

styled-components

Linked