React-dates: openDirection in SingleDatePicker don't working

[Andrevoks]

why openDirection don't working in SingleDatePicker, it works in DateRangePicker but in SingleDatePicker no

<SingleDatePicker
                    openDirection={"up"}
                    date={this.state.date}
                    isOutsideRange={() => false}
                    isDayHighlighted={day => isSameDay(moment(new Date()),moment(day))}
                    daySize={30}
                    verticalSpacing={2}
                    onDateChange={date => {
                        this.setState({ date });
                        if(date) {
                            this.props.onSaveValue(date.unix());
                        }
                    }}
                    displayFormat={this.props.dateFormat}
                    focused={this.state.focused}
                    numberOfMonths={1}
                    placeholder={this.props.dateFormat}
                    onFocusChange={({ focused }) =>{
                        this.setState({ focused });
                        this.props.isCalendarOpen(focused)
                    }}
                />

and i receive http://joxi.ru/BA05EMVhBg9xyr calendar which placed at bottom

[majapw]

I wonder if it's an issue with verticalSpacing maybe. The openDirection prop seems to work on its own.
From the storybook:

[Andrevoks]

yeah, story in story book it's working, but in my project,

i download react-dates demo check and it working, i set same version of react-dates in my project.... you see my screenshot

[Andrevoks]

hmmm.... i added appendToBody={true} and it help, but calendar has strange position.
May openDirection need some other reqired params?

[Andrevoks]

@majapw do you have some solution?

[majapw]

In your original example (where appendToBody is still false), does
removing the verticalSpacing prop fix the issue?

Are you overriding any of the react-dates styles and if so, can you share
that css?

On Fri, May 18, 2018, 11:09 AM Andrevoks [e-mail] wrote:

@majapw https://github.com/majapw do you have some solution?

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/airbnb/react-dates/issues/1166#issuecomment-390145818,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABUdtW6ueh-qTmY53Yc6lgiojEtvq5rAks5tzo_SgaJpZM4T9n-l
.

[Andrevoks]

<SingleDatePicker date={this.state.date} // momentPropTypes.momentObj or null onDateChange={date => this.setState({ date })} focused={this.state.focused} // PropTypes.bool numberOfMonths={1} placeholder={"placeholder"} openDirection={"up"} onFocusChange={({ focused }) => this.setState({ focused })} />

@majapw I create other page with only datepicker, without css and props and receive same result.
react dates version in package.json
"react-dates": "^16.3.6"

[supra28]

@Andrevoks I'm having the same issue, where you able to solve this?

[Andrevoks]

@supra28 we wrote own datepicker))

[Jony-Y]

@majapw Tried this as well. not working out of example. dont know why.

import React from 'react';
import { DateRangePicker } from 'react-dates';

const RangePicker = ({
  startDate,
  startDateId,
  endDateId,
  style,
  prevMonthButton,
  nextMonthButton,
  renderMonthElement,
  enableOutsideDays,
  isDayBlocked,
  isOutsideRange,
  verticalSpacing,
  disabled,
  endDate,
  readOnly,
  daySize,
  focusedInput,
  onFocus,
  numberOfMonths,
  minimumNights,
  onMonthChange,
  renderDayContents,
  initialVisibleMonth,
  onDatesChange,
  anchorDirection,
  openDirection,
}) => (
  <div style={style}>
    <DateRangePicker
      startDatePlaceholderText="Start date"
      endDatePlaceholderText={startDate ? '' : 'End date'}
      startDate={startDate}
      startDateId={startDateId}
      endDate={endDate}
      endDateId={endDateId}
      onDatesChange={onDatesChange}
      isDayBlocked={isDayBlocked}
      enableOutsideDays={enableOutsideDays}
      daySize={daySize}
      disabled={disabled}
      noBorder
      onNextMonthClick={onMonthChange}
      onPrevMonthClick={onMonthChange}
      numberOfMonths={numberOfMonths}
      hideKeyboardShortcutsPanel
      verticalSpacing={verticalSpacing}
      customArrowIcon={<div className={(startDate || endDate) ? 'text-black' : 'text-gray'}> - </div>}
      navPrev={prevMonthButton}
      navNext={nextMonthButton}
      renderMonthElement={renderMonthElement}
      focusedInput={focusedInput}
      onFocusChange={onFocus}
      readOnly={readOnly}
      minimumNights={minimumNights}
      renderDayContents={renderDayContents}
      isOutsideRange={isOutsideRange}
      initialVisibleMonth={initialVisibleMonth}
      anchorDirection={anchorDirection}
      openDirection={openDirection}
    />
  </div>
);

export default RangePicker;

Still not working.
using version 20.1.0