以Unix格式获取Flatpickr时间数据

时间:2018-10-17 17:39:29

标签: reactjs flatpickr

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

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

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

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

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

随附了示例布局,以供视觉参考:

A rough layout of the date and 2 time fields

如何根据日期字段中选择的日期获取这些时间字段的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>
    )
}

}

1 个答案:

答案 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属性以及(可能是暂时的)minTimemaxTime属性
  • 在州内为开始日期强制执行午夜时间

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

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