Получить данные о времени Flatpickr в формате Unix

Question

Я использую 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:59 PM, если ноль)

Мой незавершенный / грубый код 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>
    )
}

}

Answer 1

Я думаю, что я, возможно, разместил вопрос, не пытаясь на самом деле найти несколько более вероятных решений - я только что познакомился с библиотекой и поставил вопрос в течение часа, так как знал, что онлайн-ресурсов пока не будет слишком много (я попробовал несколько вариантов, но я подумал, что, возможно, в моем подходе не было необходимой фундаментальной модификации, которая не была задокументирована).

Несколько изменений в моем коде, и я смог решить свою главную проблему.

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 свойства
• соблюдение полуночного времени в штате для начальной даты

Есть несколько вопросов, которые я решаю, но, по крайней мере, я решил свои основные проблемы.

Для этого проекта я активно пытаюсь максимально сократить размер файла, поэтому мой первый автоматический выбор решения, основанного на моментах (библиотека), вышел. Я действительно думал о Luxon и Date-fns, но FlatPickr привлек мое внимание, так как он не имеет зависимостей и уже содержит встроенный сборщик (на самом деле это решение для выбора даты / времени, ориентированное на сборщик), и если необходимость когда-либо возникала, имеет поддержку локали как Что ж. Наличие готового компонента React-ready также помогало в принятии решений.