How can I style react-datepicker?

Asked 22/4, 2019 at 12:55 Answered 28/8, 2023 at 5:39

reactjs datepicker css-modules react-css-modules

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;

Pegues answered 22/4, 2019 at 12:55 Comment(4)

This isn't really a React or date-picker question. It's simply about CSS specificity. What rule are you trying to override? – Westberry 22/4, 2019 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 – Pegues 22/4, 2019 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. – Westberry 22/4, 2019 at 20:1

@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. – Keim 30/9, 2019 at 0:39

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 />
</>

Thermit answered 20/1, 2021 at 6:46 Comment(0)

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

Westberry answered 22/4, 2019 at 13:35 Comment(0)

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

Afflatus answered 29/4, 2021 at 16:55 Comment(0)

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

Buskus answered 28/8, 2023 at 5:39 Comment(0)

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

Thwart answered 22/4, 2019 at 13:26 Comment(2)

That doesn't seem to have an effect on the input's size, and !important should always be a last resort. – Westberry 22/4, 2019 at 13:36

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. – Depute 13/3, 2020 at 11:3

overwrite the default css like

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

working example

Pushball answered 22/4, 2019 at 13:41 Comment(1)

You missing this line on working example: import "react-datepicker/dist/react-datepicker.css"; – Outpour 5/11, 2020 at 10:0

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

Parsimonious answered 28/8, 2022 at 14:13 Comment(2)

thank you @alohe! Is there any documentation on this that you know of? – Toreutics 26/10, 2022 at 0:39

No, I just identified the CSS properties using chrome dev tools and started editing it, – Parsimonious 27/10, 2022 at 5:43

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

Lui answered 23/9, 2021 at 10:59 Comment(0)

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

Unbodied answered 14/7, 2022 at 14:40 Comment(0)

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

Try

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

Intemperate answered 2/12, 2022 at 11:44 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

styled-components bonus:

styled-components

Recommended topics

Hot tags