React-datepicker: Any way to init datepicker with an empty value?

Created on 4 May 2016  路  4Comments  路  Source: Hacker0x01/react-datepicker

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?

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.

All 4 comments

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

sarav1234 picture sarav1234  路  3Comments

evolve2k picture evolve2k  路  3Comments

kkras3 picture kkras3  路  3Comments

dhruvparmar372 picture dhruvparmar372  路  3Comments

hoodsy picture hoodsy  路  3Comments