IT技术 - React Datepicker（无法获取输入值） - 吾爱随笔录

React Datepicker（无法获取输入值）

IT技术 reactjs datepicker react-redux

2021-05-19 21:54:15

我是react的新手。我需要使用react-datepicker

我想在更改日期时获取输入值。如果我点击 2017 年 10 月 20 日，我想将 2017 年 10 月 20 日放入我的变量中。但是我应该使用组件而不是输入的主要问题。

在我刚刚从状态中获取value之前。像this.state.value。但现在它是 object(Moment) 状态。而且这个对象没有 value 字段。

有我的代码：

export default class DatePicker extends Component {
constructor (props) {
    super(props);
    // this.props.date should looks like "29 November 2017 00:00"
    // second argument for moment() it is format of date, because RFC 2822 date time format
    this.state = {
        date: moment(this.props.value, 'LLL')
    };
}
handleChange = (date) => {
  // const valueOfInput = this.state.date  <--- I want string with date here
  console.log('this.state.date',this.state.date);
  this.setState({date: date});
};
render() {
    return <Form.Field>
              <Label>
                <Picker
                  selected={this.state.date}
                  onChange={this.handleChange}
                  dateFormat="LLL"
                  locale={this.props.language}
                />
              </Label>
          </Form.Field>

4个回答

只需使用这个：

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

因为这会datepicker返回一个moment.js对象！

有关更多信息，请在此处查看 moment.js文档。

试试这个

<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
}

这通过使用以下方法为我解决了：

handleDateChange = date => {
let selectedDateFromCalender = date.toUTCString();
this.setState({
      actualStartDate: selectedDateFromCalender,
  });}

<DatePicker
selected={this.state.startDate}
onChange={this.handleDateChange}/>

您也可以使用以下方法，根据您的需要选择：

toISOString: "2020-10-05T09:10:38.000Z"

toJSON: "2020-10-06T09:09:16.000Z"

toUTCString: "星期四，2020 年 10 月 8 日 09:11:24 GMT"

如果您想获取新值（一旦用户单击 DatePicker 中的新日期），请将事件传递给该方法。

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} />
    ...
  }
};

其它你可能感兴趣的问题

上一篇如何正确清洁床上的漆？下一篇某些步进器在 RAMPS 1.4 上仅以一种方式旋转