web-dev-qa-db-ja.com

React Datepicker（入力の値を取得できません）

私は反応が新しいです。私は 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>

enter image description here

reactjsdatepickerreact-redux
11
SergeyB

これを使うだけです：

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

これは、datepickerがmoment.jsオブジェクトを返すためです。

詳細については、moment.js ドキュメントはこちら をご覧ください。

10
Ihor Skliar

これを試して

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

（ユーザーが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} />
    ...
  }
};
0
dmayo

同じ問題がありますが、以下の解決策を使用して解決しました。試してみてください：

<p>{this.state.date.toLocaleDateString()}</p>
0
S-lightning

新しいバージョンの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} />
    ...
0
bladeonardo

日付オブジェクトの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

0
Amardeep Gill