Edit date in input field

[jpiulac]

It would be great to be able to directly edit the date in the input field and have the date picker reflect the changes.

Avoids having to navigate many months, years etc...

This example seems to work well.
http://pushtell.github.io/react-bootstrap-date-picker/

[majapw]

You can, actually. Although the design doesn't especially indicate this right now. If you try typing a date in the L format (MM/DD/YYYY) or in ISO format (YYYY-MM-DD), it should accept it and update the calendar appropriately. ... I should change the placeholder to indicate this. :)

[majapw]

Since this isn't actually an issue, I'm going to close it. If you have any issues about specific implementation, we can open those as a follow up. :)

[timhwang21]

So I'm testing this in the Storybook example, and it doesn't seem to work:

Is this a regression, or has this feature been dropped? Thanks!

[majapw]

@timhwang21 Well fudge. Nope, that's a regression! Probs the change in input value (I thought I had tested that!). Will patch immediately.

[VikasPrasad23]

I am using airbnb/react-dates for user to select or type start and end date. However I am not able to edit date fields. I can select dates but not able to type into the date fields.

I read above blog and few other online but it didn't help me.
I also tried to find the right prop at https://github.com/airbnb/react-dates but was not able to figure out which prop to use

Code details

1. In my package.json I have "react-dates": "^12.6.0"
2. I am using below props and running it in Chrome.

'<DateRangePicker
className="clientsPaging"
displayFormat={"YYYY-MM-DD"}
startDate={this.state.startDate} // momentPropTypes.momentObj or null,
endDate={this.state.endDate} // momentPropTypes.momentObj or null,
onDatesChange={this.datesChanged} // PropTypes.func.isRequired,
isOutsideRange={() => false}
focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired,
/>'

[JetUni]

I don't think this issue should be closed. This isn't working in the storybook.

You can, actually. Although the design doesn't especially indicate this right now. If you try typing a date in the L format (MM/DD/YYYY) or in ISO format (YYYY-MM-DD), it should accept it and update the calendar appropriately. ... I should change the placeholder to indicate this. :)

I've tried entering a date in the L format and ISO format and neither one updates the calendar appropriately

[majapw]

@JetUni Can you share a gif of the behavior? Also, browser info and react-dates version would be useful. Is this in your app or in storybook?

[majapw]

@JetUni Also let's open a new issue if you see this happening in the latest. :)

[awongh]

@majapw I am still seeing this issue.

Specifically in the storybook, the single date picker with the default date set doesn't have the correct behavior when trying to type in the input.

When you enter anything into the input, the cursor moves to the end of the text.

There are other problems with the input, like when you finally enter a valid date, the input loses focus and the picker window closes.

http://airbnb.io/react-dates/?selectedKind=SDP%20-%20Input%20Props&selectedStory=default&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

[Phibedy]

Same for me as @majapw already said.

• If you type in 01.01.2018 the calendar closes
• If you type in 01.1.2018 the resulting date is null

version: 18.3.1