获取 Unix 格式的 Flatpickr 时间数据

Question

我正在使用 Flatpickr for a few date and time requirements in a React-driven project. Specifically i am using the React flavoured library React-flatpickr。

它工作正常，当我将它用于提供独立数据的日期或时间字段时没有任何问题。

我的要求有一个日期选择器，用户可以在其中使用默认日历视图选择日期。

另外两个相关字段允许用户选择开始时间和结束时间。这 2 个字段仅显示时间选择 - 没有日历视图。

在选项中，除了其他数据，dateFormat 被传递 K 因为我想要 Unix 纪元时间用于我的处理，而视图 returned 给用户可能有更友好的格式。这适用于日期字段。时间字段应 return 返回日期字段中所选日期的基于 Unix 纪元的时间。当我为时间字段传递 K 时，我得到一个数字（例如 6）。如果我的理解是正确的，时间字段会从 defaultDate 或 value 选项中获取日期。

附上示例布局以供参考：

如何根据日期字段中选择的日期获取这些时间字段的 Unix 时间？例如，我正在寻找这些值：

开始日期：123456789009（来自 'startdate' 字段的采样时间，最好是 Unix 纪元格式的 00:00:00 AM 时间）
startime：98765432236（来自 'starttime' 字段的采样时间，日期基于 'startdate' 字段以及在此字段中选择的时间。将默认为 [= 的 Unix 纪元时间53=] AM 如果为空）
结束时间：934236111833（来自 'endtime' 字段的采样时间，日期基于 'startdate' 字段以及在此字段中选择的时间。将默认为 [= 的 Unix 纪元时间54=] 如果为空则PM)

我的work-in-progress/rough反应代码：（注意：为简洁起见，删除了一些用于布局和样式的元素和类等，以确保增强可读性。我正在使用 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 属性
在开始日期的州实施午夜时间

我正在解决一些问题，但至少我解决了主要问题。

对于这个项目，我主动尝试 trim 尽可能减小文件大小，所以我的第一个自动选择 Moment（库）驱动的解决方案被淘汰了。我确实想到了 Luxon 和 Date-fns，但 FlatPickr 引起了我的注意，因为它没有依赖项并且已经内置了一个选择器（实际上它是一个以选择器为中心的 date/time 解决方案）并且如果需要的话有语言环境也支持。拥有一个预构建的 React-ready 组件也有助于决策。

获取 Unix 格式的 Flatpickr 时间数据

Get Flatpickr time data in Unix format

reactjs

flatpickr