0

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

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

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

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

在选项中,除了其他数据之外,由于我想要 Unix 纪元时间进行处理,而返回给用户的视图可能具有更友好的格式,所以在选项dateFormat中传递了。K这适用于日期字段。时间字段应返回在日期字段中选择的日期的基于 Unix 纪元的时间。K当我通过时间字段时,我得到一个数字(例如 6) 。如果我的理解是正确的,那么时间字段会从defaultDateorvalue选项中获取日期。

附上一个示例布局以供视觉参考:

日期和 2 个时间字段的粗略布局

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

  • 开始日期:123456789009(来自“startdate”字段的采样时间,理想情况下是 Unix 纪元格式的上午 00:00:00 时间)
  • starttime: 98765432236(来自“starttime”字段的采样时间,日期基于“startdate”字段和该字段中选择的时间。如果为空,则默认为 06:00:00 AM 的 Unix 纪元时间)
  • endtime: 934236111833 (来自“endtime”字段的采样时间,日期基于“startdate”字段和该字段中选择的时间。如果为 null ,则默认为 11:59:59 PM 的 Unix 纪元时间)

我的工作中/粗略的 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>
    )
}

}

4

1 回答 1

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了属性以及删除(可能是暂时的)minTimeandmaxTime属性
  • 对 startdate 强制执行该州的午夜时间

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

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

于 2018-10-18T08:38:00.320 回答