web-dev-qa-db-ja.com

react-datetimeを使用して選択した日付を取得するにはどうすればよいですか？

私は react-datetime を箱から出して使用しています。

現在、選択した日付をdate状態に保存しようとしています。

import DateTime from 'react-datetime';
import '../DateTime.css';

class SomeClass extends React.Component {
  render(){
    return (
      <div>
        <DateTime onChange={this.props.handleDate}/>
      ...

上記のプログラムは機能します-誰かがそれをクリックしたときにカレンダーを表示する単純なボックスを表示します。

handleDateメソッドは次のとおりです。

  ...
  handleDate(e){
    this.setState({date: e.target.value}, () => console.log(this.state.date))
  };

それは私の通常の古いreact-bootstrapコンポーネントで動作します：<FormControl type="date" onChange={this.props.handleDate} />しかし、DateTimeを使用すると、その値が未定義であると表示されます。 "Schedule.js:135 Uncaught TypeError: Cannot read property 'value' of undefined "

npm site のAPIを調べていますが、データの取得方法を示す例はありません。私はそれを読み過ぎているかもしれません。

DateTimeを使用して、選択した日付の値を取得するにはどうすればよいですか？ e.target.valueこの場合は機能しないようです。

reactjsdatetimereact-datetime
4
Iggy

ドキュメントから：日付が変更されたときにコールバックトリガー。入力の日付が有効な場合、コールバックは選択されたモーメントオブジェクトを唯一のパラメーターとして受け取ります。入力の日付が無効な場合、コールバックは入力の値（文字列）を受け取ります。

この情報を使用すると、ハンドラーは次のようになります。

handleDate(date){
   this.setState({date}); # ES6 
};
5
Oluwafemi Sule

Oluwafemi Suleの回答に加えて、momentオブジェクトからdateオブジェクトを取得するには、.toDate（）を使用する必要があり、モーメントごとに_dなどの内部プロパティを使用しないでください。

Momentは、エポックシフトと呼ばれる手法を使用して、このプロパティがMomentが反映する実際の日付値と異なる場合があります。特に、Moment TimeZoneが使用されている場合、このプロパティは、Momentがパブリック.format（）関数から出力する実際の値と同じになることはほとんどありません。そのため、_dの値および_で始まるその他のプロパティは、いかなる目的にも使用しないでください。

モーメントの値を出力するには、.format（）、. toString（）、または.toISOString（）を使用します。

MomentからネイティブのDateオブジェクトを取得するには、.toDate（）を使用します。この関数は、サードパーティのAPIとやり取りするために適切にシフトされた日付を返します。

Moment.jsガイド

1
Sachin Kumar