2

努力从 React/Redux 应用程序中的 react-datepicker 获取日期作为字符串。后端服务将日期字段作为特定于前端用户语言设置格式的字符串进行操作。因此，在 Redux 中将日期存储为字符串更容易。

在 2.0.0 之前的版本中，react-datepicker 使用时刻对象操作，并且可以使用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 输入字符串值的推荐解决方案是什么？

4

0 回答 0