question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

initialVisibleMonth doesn't work if we specify `focusedInput: START_DATE` in the initial state

See original GitHub issue

react-dates@21.1.0

constructor(props) {
    super(props);
    this.state = {
        focusedInput: START_DATE,
        periodSelectionType: "day",
    };
}


<DayPickerRangeController
    onDatesChange={({ startDate, endDate }) =>
        this.props.onDatesChange(moment(startDate), moment(endDate).endOf('day'))}
    onFocusChange={(focusedInput) => this.onFocusChange(focusedInput)}
    focusedInput={this.state.focusedInput}
    initialVisibleMonth={() => moment().add(10, 'months') }
/>

It works if we specify focusedInput: "startDate"

See the codesandbox

Windows 10 Chrome 76.0.3809.132

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
TheSharpieOnecommented, Nov 14, 2019

Worth noting that #53 exposed these in react-dates/constants: import { START_DATE } from 'react-dates/constants';

0reactions
ljharbcommented, Oct 4, 2019

Yep! Let’s only export the ones that have use cases; we can export more later.

Read more comments on GitHub >

github_iconTop Results From Across the Web

initialVisibleMonth doesn't work if we specify `focusedInput ...
react-dates@21.1.0 constructor(props) { super(props); this.state = { focusedInput: START_DATE, periodSelectionType: "day", }; } this.props.
Read more >
airbnb/react-dates DayPickerRangeController set visible ...
I found workaround solution. Unmounting component and then render with new initialMonth import { useState } from "react"; import moment from ...
Read more >
Storybook - GitHub Pages
Note that the focusedInput prop may be null, but if this is the case, dates are not selectable. As a result, in the...
Read more >
React-dates - Airbnb Engineering & Data Science
Dates: Moment objects representing the currently selected start and end dates. To indicate that a date has not yet been selected, these are...
Read more >
react-dates - Best of JS
The user will only be able to select a date if focusedInput is provided. Here is the minimum REQUIRED setup you need to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found