Question

我在我的React项目中使用 ant design 3 date time picker ，并且当用户选择date/time中的present/future和disable all the past dates时，im禁用了，它工作正常，但是我在功能上有一些冲突。

此处有冲突

当我再次选择显示后的未来日期和时间时，请选择页脚上的日期按钮，以便即时通讯再次选择今天的日期，显示带有今天的日期的将来时间，任何禁用select date按钮链接的解决方案

您可以理解我的冲突，请使用 stack blitz

此处是我的代码

interface AppProps { }
interface AppState {
  name: string; 
  date: Date;
}

class App extends Component<AppProps, AppState> {
  constructor(props) {
    super(props);
    this.state = {
      name: 'React',
      date: new Date()
    };
  }
//date disable
    disabledDate(current: any) {
        // Can not select days before today and today
        //return current && current < moment().endOf('day');
        return current && current < moment().startOf("day")
    }

    //time disable
    getDisabledHours() {
        var hours = [];
        for (let i = 0; i < moment().hour(); i++) {
            hours.push(i);
        }
        return hours;
    }

    //time disable
    getDisabledMinutes = (selectedHour: any) => {
        var minutes = [];
        if (selectedHour === moment().hour()) {
            for (var i = 0; i < moment().minute(); i++) {
                minutes.push(i);
            }
        }
        return minutes;
    }
  render() {
    return (
      <div>
        <DatePicker
   name="Date" disabledDate={this.disabledDate}
   onChange={d => this.setState({date: d})}
   style={{width: "100%"}}
   showTime={{ disabledMinutes: moment().date() < moment(this.state.date).date() ? undefined : this.getDisabledMinutes, 
   disabledHours: moment().date() < moment(this.state.date).date() ? undefined : this.getDisabledHours}}
   value={moment(this.state.date)}

  />
      </div>
    );
  }
}

Answer 1

我能做的就是创建一个新函数来处理日期更改

setSelectedDate = (date: any) => {
  const now = moment();  //get current date time
  const isFuture = date.isAfter(now); //check selected date is a future date compared to current date and time
  this.setState({date: isFuture ? date: now.toDate()}); //if it's a future date then assign the slected date else select the current date and time
}

并将onChange道具更改为

<DatePicker
   name="Date" disabledDate={this.disabledDate}
   onChange={d => this.setSelectedDate(d)}
.....

这是更新后的stackblitz

反应蚂蚁设计日期时间选择器选择日期选项问题

1 个答案: