Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates

Question

I don't know what is happening with react-dates. I am taking awful designs, that worked just some months ago.

[![enter image description here][1]][1]import 'react-dates/initialize';
import React from 'react';
import monent from 'moment';
import 'react-dates/lib/css/_datepicker.css';
import {SingleDatePicker} from 'react-dates';

<SingleDatePicker date={this.state.createdAt} onDateChange={this.onDateChange} focused={this.state.calendarFocused} displayFormat="DD-MM-YYYY" onFocusChange={this.onFocusChange} id="1"/>

score 1 · Answer 1 · answered Nov 21 '19 at 01:58

Just ran into this problem in a React app. For some reason, my CSS files were not being included in my builds and I got the same ugly UI as your screenshot.

I copied the CSS into my own file instead of importing with WebPack and it fixed. Hope this helps someone else.

Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates

1 Answers1