SingleDatePicker with numberOfMonths={1} not displaying month table

I tried to implement the SingleDatePicker wrapped in the same way found in the examples. This is the result:

For some reason the current month table seems to be positioned outside the container. The month previous to the current month (October) is rendered in the position where the current month(November) should be , and is hidden because of the numberOfMonths={1} prop, therefore the white space.

This is how I’ve implemented the wrapper:

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

class SingleDatePickerWrapper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      focused: false,
      date: null,
    };

    this.onDateChange = this.onDateChange.bind(this);
    this.onFocusChange = this.onFocusChange.bind(this);
  }

  onDateChange(date) {
    this.setState({ date });
  }

  onFocusChange({ focused }) {
    this.setState({ focused });
  }

  render() {
    const { focused, date } = this.state;

    return (
      <SingleDatePicker
        {...this.props}
        id="date_input"
        date={date}
        focused={focused}
        onDateChange={this.onDateChange}
        onFocusChange={this.onFocusChange}
      />
    );
  }
}

export default SingleDatePickerWrapper;

And this is how I’m using it:

<SingleDatePickerWrapper
              numberOfMonths={1}
 />

I’m not sure if I’m doing something wrong or if I need to pass some extra props through the wrapper in order for the component to render correctly, but I’m using it pretty much unchanged from the SingleDatePicker example. Any help would be greatly appreciated 😃

[eaharonoff]

Hi, I am using the DayPickerRangeController component and I am having the same issue as @7091lapS . I cloned the repo and ran the script yarn build:css to retrieve the CSS and copied it into my project. I also tried all the above recommendations to no avail. Here is what my wrapper looks like:

import React, { Component } from 'react';
import moment from 'moment';
import { DayPickerRangeController } from 'react-dates';

import { START_DATE } from './constants';

if (process.env.BROWSER) {
  require('./styles/_datepicker.css');
}

class DatePickerWrapper extends Component {

  state = {
    errorMessages: [],
    startDate: null,
    endDate: null,
    focusedInput: START_DATE
  }

  _onDateChange = ({ startDate, endDate }) => {
    this.setState({ endDate: endDate });
  }

  _onFocusChange = (focusedInput) => {
    this.setState({
      focusedInput: !focusedInput ? START_DATE : focusedInput
    });
  }

  render() {
    const {
      startDate,
      endDate,
      focusedInput
    } = this.state;

          <DayPickerRangeController
            startDate={ startDate } 
            endDate={ endDate }
            onDatesChange={ this._onDateChange } 
            focusedInput={ focusedInput } 
            onFocusChange={ this._onFocusChange } 
            numberOfMonths={ 1 }
            initialVisibleMonth={ () => moment() }
          />
      </div>
    );
  }
}

export default DatePickerWrapper;

Here is what renders:

Any help would be much appreciated 😃

[amlivingamliving]

@majapw I believe #256 correctly identifies the source of the problem. The parent container needs to be text-align: left;. Thanks.