Question

我在React驱动的项目中使用Flatpickr满足一些日期和时间要求。具体来说，我正在使用React风味的库React-flatpickr。

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

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

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

在该选项中，除了其他数据外，还传递dateFormat K，因为我希望Unix时代来进行我的处理，而返回给用户的视图可能具有更友好的格式。对于日期字段，这很好用。时间字段应返回日期字段中所选日期的基于Unix纪元的时间。当我为时间字段传递K时，我得到一位数字（例如6）。如果我的理解正确，那么时间字段将从defaultDate或value选项中获取日期。

随附了示例布局，以供视觉参考：

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

开始日期：123456789009（“开始日期”字段中的采样时间，最好是Unix时期格式的00:00:00 AM时间）
startime：98765432236（来自“ starttime”字段的采样时间，日期基于“ startdate”字段，并在此字段中选择了时间。如果为null，则默认为Unix纪元时间为06:00:00 AM））
endtime：934236111833（来自“ endtime”字段的采样时间，日期基于“ startdate”字段以及在此字段中选择的时间。如果为null，则默认为Unix epoch time for 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属性
在州内为开始日期强制执行午夜时间

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

对于这个项目，我正在积极尝试尽可能减小文件大小，因此我自动选择了Moment（库）驱动的解决方案。我确实想到过Luxon和Date-fns，但是FlatPickr引起了我的注意，因为它没有依赖关系，并且已经内置了一个选择器（实际上，它是一个针对选择器的日期/时间解决方案），并且如果需要的话，还可以使用语言环境支持好。拥有预构建的React-ready组件也有助于决策。

以Unix格式获取Flatpickr时间数据

1 个答案: