I wanted to create a datepicker which is inited with an empty value, but I got several warnings after tried several ways, and didn't find an available way:
Use empty string
import React from 'react'
import DatePicker from 'react-datepicker'
import moment from 'moment'
import 'react-datepicker/dist/react-datepicker.css'
export class Input extends React.Component {
state = {
value: '',
}
onChange = (value) => {
this.setState({ value })
}
render() {
return (
<DatePicker
dateFormat="YYYY/MM/DD"
selected={this.state.value}
onChange={onChange}
/>
)
}
}
export default Input
Then I got
Warning: Failed propType: Invalid prop `selected` of type `string` supplied to `DatePicker`, expected `object`. Check the render method of `Input`.
Use null
I got
Warning: `value` prop on `input` should not be null. Consider using the empty string to clear the component or `undefined` for uncontrolled components.
Use undefined
No warning at first. After select one date, I got this:
Warning: DateInput is changing a uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components
Use Invalid moment
The datepicker input will show a string 'Invalid date'.
So is there any way to init datepicker with empty value?
Dupe of #464, I think. What version of the datepicker are you using?
This issue is resolved after upgrading react-datepicker to 0.27.0. I'll close it.
And the version is 0.25.0 before upgrading.
because you init value with a String. datapicker thinks that the value is not available, you should use momentjs to format your value like this moment(),this is website https://momentjs.com/
I am facing an issue due to the empty value. I have to keep some values disabled in the date picker (basically, a time picker only for me). If I set the selected value as an empty value, the datepicker shows the current system time highlighted (selected) by default even if it is disabled.
Most helpful comment
This issue is resolved after upgrading react-datepicker to 0.27.0. I'll close it.
And the version is 0.25.0 before upgrading.