[DatePicker] Add ability to use keyboard to write date #5677
Conversation
muibot
added
PR: Needs Review
PR: needs revision
|
My pull request for this issue #5030 has been open since August |
oliviertassinari
added
the
component: date picker
| import IconButton from '../IconButton'; | ||
| import DateRangeIcon from '../svg-icons/action/date-range'; | ||
|
|
||
| export function getStyles() { |
There was a problem hiding this comment.
Why exporting this function?
| shouldHandleKeyboard() { | ||
| return this.props.keyboardEnabled && !this.props.disabled && | ||
| !this.props.locale && !this.props.shouldDisableDate && | ||
| !this.isControlled(); |
There was a problem hiding this comment.
I'm worried about this feature being disabled for controlled component.
On the next branch, we only focus on stateless component, hence, they are all controlled at their lowest implementation level.
What's the issue?
| ref="input" | ||
| style={textFieldStyle} | ||
| value={this.state.date ? formatDate(this.state.date) : ''} | ||
| errorText={this.state.hasError && errorText} |
There was a problem hiding this comment.
That's a breaking change as users might be using this errorText property independently from the hasError state. I would rather move that error logic away into another state error wrapper component.
| onFocus={this.handleFocus} | ||
| onTouchTap={this.handleTouchTap} | ||
| onTouchTap={!this.shouldHandleKeyboard() && this.handleTouchTap} |
There was a problem hiding this comment.
Same, that's a breaking change.
|
|
||
| return ( | ||
| <div className={className} style={prepareStyles(Object.assign({}, style))}> | ||
| <TextField | ||
| {...other} | ||
| onBlur={this.handleBlur} | ||
| onChange={this.handleTextChange} |
There was a problem hiding this comment.
Same, that's a breaking change.
|
|
||
| return ( | ||
| <div className={className} style={prepareStyles(Object.assign({}, style))}> | ||
| <TextField | ||
| {...other} | ||
| onBlur={this.handleBlur} |
There was a problem hiding this comment.
Same, that's a breaking change.
| @@ -253,6 +320,21 @@ class DatePicker extends Component { | |||
| } | |||
| }; | |||
|
|
|||
| parseDate = (textDate) => { | |||
There was a problem hiding this comment.
It would be great to allow users using a different date format.
Like DD-MM-YYYY.
| @@ -150,11 +177,15 @@ class DatePicker extends Component { | |||
|
|
|||
| state = { | |||
| date: undefined, | |||
| hasError: false, | |||
| textDate: '', | |||
There was a problem hiding this comment.
What's the use case for this new state?
|
I'm closing this PR as has been inactive for quite some time. Thanks for your time. |
As for now you can only use mouse clicks to change the date in
DatePicker. I've added the ability to use keyboard.Use
keyboardEnabledprop to enable keyboard input forDatePicker.Unfortunately by now it is only working with default locale (
en-US). In other caseskeyboardEnabledprop will be ignored. Also it will not work if it is controlled component or has disabled dates.Fix mui/mui-x#6232