我在React驱动的项目中使用Flatpickr满足一些日期和时间要求。具体来说,我正在使用React风味的库React-flatpickr。
它工作正常,当我将其用于提供独立数据的日期或时间字段时,没有任何问题。
我的要求有一个日期选择器,用户可以在其中使用默认日历视图选择日期。
两个附加的相关字段允许用户选择开始时间和结束时间。这2个字段仅显示时间选择-没有日历视图。
在该选项中,除了其他数据外,还传递dateFormat
K
,因为我希望Unix时代来进行我的处理,而返回给用户的视图可能具有更友好的格式。对于日期字段,这很好用。时间字段应返回日期字段中所选日期的基于Unix纪元的时间。当我为时间字段传递K
时,我得到一位数字(例如6)。如果我的理解正确,那么时间字段将从defaultDate
或value
选项中获取日期。
随附了示例布局,以供视觉参考:
如何根据日期字段中选择的日期获取这些时间字段的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>
)
}
}
答案 0 :(得分:0)
我想我可能没有真正尝试其他可能的解决方案就发布了问题-我刚刚熟悉图书馆,并在一个小时内提出了问题,因为我知道目前还没有太多的在线资源(我确实尝试了一些选择,但以为我的方法可能缺少未记录的基本必需修改)。
对我的代码进行了一些更改,我就能解决我的主要问题。
state={
startdate: Math.round((new Date()).setUTCHours(0,0,0,0)),
starttime: null,
endtime: null,
}
<Flatpickr
value={startdate}
options={{
wrap: true,
minDate: 'today',
altInput: true,
altFormat: "F j, Y",
dateFormat: "U"
}}
onChange={date => { this.startDateChanged(date) }}
>
/* ...other code here */
</Flatpickr>
<Flatpickr
key={startdate}
options={{
wrap: true,
enableTime: true,
noCalendar: true,
altInput: true,
altFormat: "H:i K",
dateFormat: "U",
defaultDate: startdate,
}}
onChange={time => { this.startTimeChanged(time) }}
>
/* ...other code here */
</Flatpickr>
<Flatpickr
key={startdate}
options={{
wrap: true,
enableTime: true,
noCalendar: true,
altInput: true,
altFormat: "H:i K",
dateFormat: "U",
defaultDate: startdate,
}}
onChange={time => { this.endTimeChanged(time) }}
>
/* ...other code here */
</Flatpickr>
主要更改包括:
key
属性可以使时间字段接收状态变化value
属性以及(可能是暂时的)minTime
和maxTime
属性我正在解决一些问题,但至少我解决了主要问题。
对于这个项目,我正在积极尝试尽可能减小文件大小,因此我自动选择了Moment(库)驱动的解决方案。我确实想到过Luxon和Date-fns,但是FlatPickr引起了我的注意,因为它没有依赖关系,并且已经内置了一个选择器(实际上,它是一个针对选择器的日期/时间解决方案),并且如果需要的话,还可以使用语言环境支持好。拥有预构建的React-ready组件也有助于决策。