Как получить строковое значение из ввода response-datepicker 2.0.0? - PullRequest
Новая
       15

Как получить строковое значение из ввода response-datepicker 2.0.0?

0 голосов
/ 04 декабря 2018

Пытается получить даты в виде строк из Reaction-DatePicker в приложении React / Redux.Внутренние службы работают с полями даты в виде строк в формате, специфичном для языковых настроек интерфейсного пользователя.Поэтому в Redux проще хранить даты в виде строк.

В версии до 2.0.0 реакция-выборщик, работающий с моментными объектами, и преобразование можно выполнить с помощью momentDate.format () .

Версия 2.0.0 работает с ванильными датами JS.response-datepicker выполняет преобразование string <-> Date с внутренними методами (formatDate), которые не экспортируются.Не удалось получить доступ к этим функциям.

В настоящее время используется обходной путь, выполняющий преобразование с помощью moment.js.У этого подхода есть недостатки:

  • Маски формата moment.js и response-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) }
    />
);

Какое рекомендуемое решение для доступа к значениям строки вводаact-datepicker 2.0.0?

...