React Datepicker（无法获取输入值）

Question

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

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

在我刚刚从状态中获取价值之前。像this.state.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>

Answer 1

就用这个吧：

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

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

有关更多信息，请查看 moment.js docs here。

Answer 2

试试这个

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

Answer 3

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

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"

Answer 4

如果您想获取新值（一旦用户单击 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} />
    ...
  }
};

Answer 5

新版本的 react-datepicker 库停止使用 moment.js 对象，所以如果你想获得日期的格式化字符串表示，这是我的解决方案。

首次导入 import format from "date-fns/format"; 那么

    <DatePicker 
       onChange={(value)=>this.handleChange(format(value, "yyyy/MM/dd", { 
       awareOfUnicodeTokens: true }))}
       dateFormat="yyyy/MM/dd"
       selected={this.state.inputValue} otherProps={here} />
    ...

Answer 6

您可以在日期对象上使用 getTime() 辅助函数来获取该特定日期的毫秒时间戳，这是一种 JavaScript 数字数据类型。用于将数据保存在应用程序的后端。例如 Flask Peewee ORM 需要为 DateTimeField 保存时间戳。

const [startDate, setStartDate] = useState(new Date())

<DatePicker
  onSelect( date => {
    setStartDate(getTime(date))
  }
/>

来源：https://date-fns.org/v2.0.0-alpha.7/docs/getTime

将其与将默认状态值设置为页面加载时间戳的效果相结合：

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

否则，对于您的 UI，您可以使用 format() 辅助函数以任何给定格式获取给定对象的字符串值：

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

来源：https://date-fns.org/v2.0.0-alpha.7/docs/format

Answer 7

我有同样的问题，我使用以下解决方案解决了它。请试一试：

<p>{this.state.date.toLocaleDateString()}</p>

Answer 8

<input id="tdate" type="date" name="todate" onchange="getToDate(event);">

function getToDate(e){
 const tdate = e.target.value;

//alert(tdate);
//console.log(tdate);
//return tdate;
};

这里我试图访问函数外部的“tdate”变量。