React Datepicker( can't get value of input)

前端 未结 7 1661
名媛妹妹
名媛妹妹 2021-02-20 06:25

I am new in react. I need use react-datepicker

I want to get value of input, when I change date. If i click on 20th October 2017, i want put 20th October 2017 in my vari

相关标签:
7条回答
  • 2021-02-20 06:46

    Just use this:

    handleChange = date => {
      const valueOfInput = date.format();
      ///...
    };
    

    Because this datepicker returns a moment.js object!

    For more information, look into the moment.js docs here.

    0 讨论(0)
  • 2021-02-20 06:46

    I have same problem, and I solved it by using the below solution. Please try it:

    <p>{this.state.date.toLocaleDateString()}</p>
    
    0 讨论(0)
  • 2021-02-20 06:53

    The new version of react-datepicker library stopped using a moment.js object, so here is my solution if you want to get a formatted string representation of the date.

    First import import format from "date-fns/format"; Then

        <DatePicker 
           onChange={(value)=>this.handleChange(format(value, "yyyy/MM/dd", { 
           awareOfUnicodeTokens: true }))}
           dateFormat="yyyy/MM/dd"
           selected={this.state.inputValue} otherProps={here} />
        ...
    
    0 讨论(0)
  • 2021-02-20 07:00

    You can use the getTime() helper function on your date object to get the millisecond timestamp for that specific date, which is a JavaScript number data type. Useful for saving data in the backend of your application. For example Flask Peewee ORM requires a timestamp to be saved for the DateTimeField.

    const [startDate, setStartDate] = useState(new Date())
    
    <DatePicker
      onSelect( date => {
        setStartDate(getTime(date))
      }
    />
    

    source: https://date-fns.org/v2.0.0-alpha.7/docs/getTime

    Combine it with an effect to set the default state value to a timestamp on page load:

    useEffect(() => {
        setStartDate(getTime(startDate))
      }, [])
    
    

    Otherwise for your UI, you can use the format() helper function to get the string value of the given object, with any given format:

    <h1>{format(startDate, "MMMM d, yyyy h:mm aa")}</h1>
    

    source: https://date-fns.org/v2.0.0-alpha.7/docs/format

    0 讨论(0)
  • 2021-02-20 07:01

    Try this

    <DatePicker 
       onChange={(value, e) => this.handleChange(value, e)}
       selected={this.state.inputValue} otherProps={here} 
    />
    
    // you can access the value field in handleChange by e.target.value
    
    handleChange(value, e) {
        console.log(value); // this will be a moment date object
        console.log(e.target.value); // this will be a string value in datepicker input field
    }
    
    0 讨论(0)
  • 2021-02-20 07:01

    If you want to get the new value (once the user clicks on a new date from DatePicker) pass the event to the method.

    class MyComponent extends React.Component {
      constructor(props) {
        this.state = {inputValue: moment(),} // this will set the initial date to "today", 
                                             // you could also put another prop.state value there
        this.handleChange = this.handleChange.bind(this);
      }
      }
    
    
      handleChange(value) {
        console.log(value); // this will be a moment date object
        // now you can put this value into state
        this.setState({inputValue: value});
      }
    
      render(){
        ...
        <DatePicker 
           onChange={(event) => this.handleChange(event)}
           selected={this.state.inputValue} otherProps={here} />
        ...
      }
    };
    
    0 讨论(0)
提交回复
热议问题