同一日期只能选择时差

Question

我有 2 个日期和时间 selection box，作为开始日期和结束日期。现在我可以 select 不同的日期了。所以我想要的是能够 select 相同的时差日期。例如开始日期 - 2020-07-02 时间 - 21:90 结束日期 - 2020-07-02 时间 - 22:00

我还可以 select 从当前时间开始计时，步长为 30 分钟，并且禁用之前的时间。

尝试过的代码

 import Datetime from 'react-datetime';
    import momentLocalizer from 'react-widgets-moment';
    import { DateTimePicker } from 'react-widgets';
    import moment from 'moment';

开始日期

<Datetime
dateFormat='YYYY-MM-DD'
timeFormat={false}
closeOnSelect={true}
onChange={(e) => {
    // changeStartDate(e);
    setStartDate(e);
}}
value={date}
isValidDate={ validStartDate }

/>

开始时间

    <DateTimePicker
    date={false}
    timeFormat={'HH:mm'}
    format={'HH:mm'}
    // defaultValue={new Date(startInterval)}
    onChange={(e) => {
        setStartTime(e);
    }}
    value={time}
    inputProps={{component: props => <input {...props} readOnly/>}}
    // min={new Date()}
    // step={30}
    // min={ (date && moment(date).isSame(moment(), 'day')) ? moment(new Date()).add({hours: 6}).set({minute:0}).toDate() : moment().startOf('day').toDate() }
/>

类似的代码也适用于结束日期和时间。

正在检查有效日期的函数

var yesterday = Datetime.moment().subtract(1, 'day');
var validStartDate = function( current ){
  if(endDate){
    return !current.isAfter( Datetime.moment(endDate).add(0, 'day') ) && current.isAfter( yesterday );
  }else{
    return current.isAfter( yesterday );
  }
};
var validEndDate = function( current ){
  if(date){
    return current.isAfter( Datetime.moment(date).add(-1, 'day') );
  }
  else{
    return current.isAfter( yesterday );
  }
};

输出：按钮应该在正确输入的基础上启用，但实际上并没有发生。

Answer 1

好吧，我需要回答我自己的问题。

开始时间更改为

<DateTimePicker
date={false}
open={openStartTime}
timeFormat={'HH:mm'}
format={'HH:mm'}
onChange={(e) => {
    setStartTime(e);
}}
value={time}
min={new Date(new Date().getTime()+ (1000 * 60 * 30) - (new Date().getTime() % 
(1000 * 60 * 30)))}
/>

将结束时间更改为

<DateTimePicker
date={false}
timeFormat={'HH:mm'}
format={'HH:mm'}
onChange={(e) => {
  setEndTime(e);
}}
value={endTime}
min={moment(endDate).isAfter(date) ? moment(endTime).startOf('day').toDate() : new Date(new Date(time).getTime()+ (1000 * 60 * 30) - (new Date(time).getTime() % (1000 * 60 * 30)))}
/>

这解决了我的问题。

同一日期只能选择时差

same date can be selected with time difference only

javascript

datetimepicker

reactjs