react-dates broken - not recognising css?

Question

I have created a simple datepicker component based on react-dates and implemented as per documentation at https://github.com/airbnb/react-dates

The datepicker seems to be working however the calendar styling is completely broken when clicking on the datepicker field

The datepicker code:

import React, { Component } from 'react';
import moment from 'moment';
import 'react-dates/initialize';
import { SingleDatePicker } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';

export default class DatePicker extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedStartDate: moment(),
            calendarSelectedStartDate: false
        }
    }
    
    onDateChange = (selectedStartDate) => {
      this.setState(() => ({ selectedStartDate }));
    };
    onFocusChange = ({ focused }) => {
      this.setState(() => ({ calendarSelectedStartDate: focused }));
    };

    render() {
        return (
            
          <SingleDatePicker
            date={this.state.selectedStartDate}
            onDateChange={this.onDateChange}
            focused={this.state.calendarSelectedStartDate}
            onFocusChange={this.onFocusChange}
            numberOfMonths={1}
            isOutsideRange={() => false}
          />
        )
    }
}

Implementation is just call to :

<DatePicker />

outside of any parent html tags that could affect it.

The styling looks like this:

It seems to work if I paste your code in a sandbox: https://codesandbox.io/s/cranky-euler-1y5xq — Zsolt Meszaros, Dec 06 '20 at 14:32
Possibly, but my case is that css is not available despite I imported it. Also I use css loader so as far as I know it should be included in my global css when imported to react component. I did call the datepicker css directly in the page head and then the calendar is styled properly. — nickornotto, Dec 08 '20 at 16:14

score 1 · Answer 1 · answered May 20 '22 at 18:04

1

Ok i found an answer for this problem, so:

Are you trying to render the calendar inside another element that is not always visible, right?

Well, if you are doing that, in the parent component you must have an state like "isOpen" or something like that. Then, when you call the Picker component, must be like:

{isOpen && <DatePicker />}

I spent like two hours searching this solution. I hope that make sense for you.

answered May 20 '22 at 18:04

Agustin G.

72
3
19

This is not really a clear answer. I am doing something like what you are describing and still seeing this problem. – suncannon Nov 17 '22 at 03:18
@suncannon can you create a question with an example code here or in sandbox? is weird because this library doesn't receive updates, and my css trouble looked exactly same to the question and i resolved it on this way – Agustin G. Nov 17 '22 at 11:57

react-dates broken - not recognising css?

1 Answers1