React-typescript: как связать средства выбора дня и времени в response-datepicker - PullRequest
Новая
       54

React-typescript: как связать средства выбора дня и времени в response-datepicker

0 голосов
/ 16 июня 2020

Я использую для своего приложения сценарий реакции. Я использую response-datepicker , а для покрытия времени я использую moment js. Я хочу создать одно настраиваемое средство выбора даты, чтобы я мог повторно использовать его в другом компоненте моего приложения. В моем календаре выбора даты у меня также есть варианты времени. когда я выбираю любую дату, отображается дата выбора, но как только я выбираю время, отображается сегодняшняя дата со временем. Это Изображение . Из документации не нашел, как вместе выбрать дату и время. Можно ли как-нибудь выбрать дату и время вместе?

Это мой компонент выбора даты 

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";


export interface IDatepicker {
  value: string | undefined;
  includeTime?: boolean;
  showToday?: boolean;
  onBlur?: (i: React.FocusEvent<HTMLInputElement>) => void;
  onFocus?: (i: React.FocusEvent<HTMLInputElement>) => void;
  onChange: (i: any) => void;
}

export default ({
  value,
  includeTime,
  showToday,
  onChange,
  onBlur,
  onFocus
}: IDatepicker) => {
  const [startDate, setStartDate] = useState<Date | null>(new Date());
  const handleChange = (date: Date | null) => {
    onChange && date && onChange(date);
    return false;
  };

  return (
    <DatePicker
      selected={startDate}
      onChange={handleChange}
      showTimeSelect
      timeIntervals={15}
      timeInputLabel="Time:"
      dateFormat="MMMM d, yyyy h:mm aa"
      onBlur={onBlur ? onBlur : undefined}
      onFocus={onFocus ? onFocus : undefined}
      value={value}
      withPortal
    />
  );
};

Это компонент, который я использую для выбора даты 

import React from "react";

import TimeLine from "components/datepicker";
import moment from "moment";

export default () => {
  return (
    <div>
      <TimeLine
        value={undefined}
        onChange={i => console.log(moment(i).format("MMMM Do YYYY, h:mm:ss a"))}
      />
    </div>
  );
};
...