Я использую Flatpickr для нескольких требований к дате и времени в проекте, управляемом React.В частности, я использую библиотеку React со вкусом React-flatpickr .
. Она работает нормально, и при использовании ее для полей даты или времени, предоставляющих автономные данные, проблем не возникает.
В моем требовании есть средство выбора даты, где пользователь выбирает дату, используя представление календаря по умолчанию.
Два дополнительных связанных поля позволяют пользователю выбрать время начала и время окончания.Эти 2 поля показывают только выбор времени - нет просмотра календаря.
В опциях, помимо других данных, передается dateFormat K, так как я хочу, чтобы время моей обработки в Unix было временем, а представление, возвращаемое пользователю, может иметь более дружественные форматы.Это отлично работает для поля даты.Поля времени должны возвращать время на основе эпохи Unix для дня, выбранного в поле даты.Я получаю одну цифру (например, 6), когда передаю K для полей времени.Если я правильно понимаю, поля времени получают дату из опций defaultDate или value.
Образец макета прилагается для некоторой визуальной ссылки:
Как получить время Unix для этих полей времени на основедата выбрана в поле даты?Например, я ищу эти значения:
- дата начала: 123456789009 (время выборки из поля 'startdate', в идеале время 00:00:00 AM в формате эпохи Unix)
- startime: 98765432236 (время выборки из поля 'starttime', дата основана на поле 'startdate' с временем, выбранным в этом поле. По умолчанию будет установлено время эпохи Unix для 06:00:00 AM, если ноль)
- endtime: 934236111833 (время выборки из поля 'endtime', дата основана на поле 'startdate' с временем, выбранным в этом поле. По умолчанию будет время эпохи Unix для 11:59:59PM, если ноль)
Мой код незавершенной работы / грубый код React: (Примечание: некоторые элементы и классы и т. Д., Которые использовались для макета и стиля, были удалены для краткости, чтобы обеспечить улучшенную читаемость. IЯ использую 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>
)
}
}