0

我正在为我的应用程序使用 react-typescript。我正在使用react-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>
  );
};
4

0 回答 0