【发布时间】：2018-10-17 17:39:29
【问题描述】：
我在一个 React 驱动的项目中使用 Flatpickr 来满足一些日期和时间要求。具体来说，我正在使用 React 风格的库 React-flatpickr。
它工作正常，当我将它用于提供独立数据的日期或时间字段时没有问题。
我的要求有一个日期选择器，用户可以在其中使用默认日历视图选择日期。
另外两个相关字段允许用户选择开始时间和结束时间。这 2 个字段仅显示时间选择 - 没有日历视图。
在选项中，除了其他数据，dateFormat 传递给K，因为我希望 Unix 纪元时间用于我的处理，而返回给用户的视图可能具有更友好的格式。这适用于日期字段。时间字段应返回在日期字段中选择的日期的基于 Unix 纪元的时间。当我为时间字段传递K 时，我得到一个数字（例如 6）。如果我的理解是正确的，那么时间字段会从 defaultDate 或 value 选项中获取日期。
附上一个示例布局以供视觉参考：
如何根据日期字段中选择的日期获取这些时间字段的 Unix 时间？例如，我正在寻找这些值：
- 开始日期：123456789009（来自“startdate”字段的采样时间，最好是 Unix 纪元格式的上午 00:00:00 时间）
- starttime: 98765432236（来自“starttime”字段的采样时间，日期基于“startdate”字段和此字段中选择的时间。如果为空，则默认为 Unix 纪元时间 06:00:00 AM )
- endtime: 934236111833（来自“endtime”字段的采样时间，日期基于“startdate”字段和该字段中选择的时间。如果为空，则默认为 11:59:59 PM 的 Unix 纪元时间)
我正在进行的工作/粗略的 React 代码： （注意：为简洁起见，一些用于布局和样式的元素和类等已被删除，以确保增强可读性。我正在使用 Redux，所以可能根本没有使用本地状态。本地状态只是为了让我可以得到正在运行的工作版本。）
class SelectDateTime extends React.Component{
state={
startdate: new Date().getTime(),
starttime: "",
endtime: "",
}
startDateChanged=(date)=>{
this.setState({
...this.state,
startdate: date
})
}
startTimeChanged=(time)=>{
this.setState({
...this.state,
starttime: time
})
}
endTimeChanged=(time)=>{
this.setState({
...this.state,
endtime: time
})
}
render(){
const { startdate, starttime, endtime } = this.state;
return(
<React.Fragment>
<div>
Start Date
<Flatpickr
value={startdate}
options={{
wrap: true,
minDate: 'today',
altInput: true,
altFormat: "F j, Y",
dateFormat: "U"
}}
onChange={date => { this.startDateChanged(date) }}
>
<input type='text' data-input />
<button type='button' data-toggle>Select</button>
</Flatpickr>
<div>
Start Time
<Flatpickr
value={starttime}
options={{
wrap: true,
enableTime: true,
noCalendar: true,
//dateFormat: "H:i",
altInput: true,
altFormat: "H:i K",
dateFormat: "U",
defaultDate: startdate,
minDate: "06:00",
maxDate: "23:59"
}}
onChange={time => { this.startTimeChanged(time) }}
>
<input type='text' data-input />
<button type='button' data-toggle>Select</button>
</Flatpickr>
</div>
<div>
End Time
<Flatpickr
value={startdate}
//value={endtime}
options={{
wrap: true,
enableTime: true,
noCalendar: true,
altInput: true,
altFormat: "H:i K",
dateFormat: "U",
defaultDate: "startdate",
minDate: "06:00",
maxDate: "23:59"
}}
onChange={time => { this.endTimeChanged(time) }}
>
<input type='text' data-input />
<button type='button' data-toggle>Select</button>
</Flatpickr>
</div>
</React.Fragment>
)
}
}
【问题讨论】：