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