CODEWITHSUNDEEP
reactjsdatepicker
Wen W
Wen W

Reputation: 2647

React-datepicker corruption - days of the week

corruption

Has anyone seen this kind of corruption when using the react-datepicker? I have the datepicker within a react component. Here's the code I have. This started happening after I update rect-datepicker from 0.25.0 to 0.39.0 due to errors with v25. Any help is appreciated. Thanks.

import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

            <Col md={2}>
              <DatePicker
                minDate={this.state.minFilterDateTime}
                maxDate={this.state.maxFilterDateTime}
                onChange={this._changeFilterFromDateTime}
                selected={this.state.filterFromDateTime} />
            </Col>

Upvotes: 0

Views: 1482

Answers (1)

Sphinxxx
Sphinxxx

Reputation: 13017

The CSS class for the day names have changed between those versions, so you must also update your react-datepicker CSS file (or reference), for example

<link href="https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/0.39.0/react-datepicker.min.css" rel="stylesheet" />

Edit

The block of CSS that tells the new react-datepicker__day-name class to display: inline-block:

.react-datepicker__day-name,
.react-datepicker__day {
    color: #000;
    display: inline-block;
    width: 1.7rem;
    line-height: 1.7rem;
    text-align: center;
    margin: 0.166rem;
}

Upvotes: 1

Related Questions