React/Redux アプリで、react-datepicker から日付を文字列として取得するのに苦労しています。バックエンド サービスは、日付フィールドをフロントエンド ユーザーの言語設定に固有の形式の文字列として操作します。したがって、Redux では日付を文字列として保存する方が簡単です。
2.0.0 より前のバージョンでは、react-datepicker は moment オブジェクトで操作され、変換はmomentDate.format()で実行できました。
バージョン 2.0.0 はバニラの JS 日付で動作します。react-datepicker は、エクスポートされない内部メソッド ( ) でstring<->変換を実行します。これらの機能にアクセスできませんでした。DateformatDate
現在、moment.js で変換を実行する回避策を使用しています。アプローチには欠点があります。
- moment.js と react-datepicker のフォーマット マスクが一致しません (たとえば、大文字と小文字が異なります)。
- 余分なライブラリの依存関係 (moment.js)
現在のコード:
import React from 'react';
import OriginalDatepicker from 'react-datepicker';
import moment from 'moment';
const dateFormat = 'dd.MM.yyyy'; // Depends on user current locale.
const momentDateFormat = dateFormat.toUpperCase();
function parseDate(dateString) {
if (dateString) {
return moment(dateString, momentDateFormat).toDate();
} else {
return null;
}
}
function format(date) {
if (date) {
return moment(date).format(momentDateFormat);
} else {
return null;
}
}
const ApplicationSpecificDatepicker = props => {
if (props.hasOwnProperty('selectedString')) {
const { selectedString, ...remaining } = props;
props = { ...remaining, selected: parseDate(props.selectedString) };
}
const onChangeOverride = (...args) => {
if (props.onChangeAsString) {
const [date, ...remaining] = args;
const stringDate = format(date);
props.onChangeAsString(stringDate, ...remaining);
}
if (props.onChange) {
props.onChange(...args);
}
}
return (
<OriginalDatepicker
dateFormat={ dateFormat }
{ ...props }
onChange={ onChangeOverride }
/>
);
};
const DatepickerUsage = () => (
<ApplicationSpecificDatepicker selectedString={ '31.12.2018' }
onChangeAsString={ (date) => console.log(date) }
/>
);
react-datepicker 2.0.0 入力文字列値にアクセスするための推奨ソリューションは何ですか?