Reactjs react ant设计日期时间选择器选择日期选项问题

Reactjs react ant设计日期时间选择器选择日期选项问题,reactjs,date,antd,react-typescript,Reactjs,Date,Antd,React Typescript,我将用于我的react项目,当用户选择当前/未来的日期/时间时,我禁用了,并且禁用了所有过去的日期,它工作正常,但我的功能存在一些冲突 这里是冲突 当我再次选择显示后的未来日期和时间时,请选择页脚上的日期按钮,以便我再次选择 今天日期,用今天日期显示未来时间,禁用选择日期按钮链接的任何解决方案 您可以理解我的冲突,请使用 这里是我的代码 interface AppProps { } interface AppState { name: string; date: Date; } cl

我将用于我的react项目,当用户选择
当前/未来的
日期/时间
时,我禁用了,并且
禁用了所有过去的日期
,它工作正常,但我的功能存在一些冲突

这里是冲突

当我再次选择显示后的未来日期和时间时,请选择页脚上的日期按钮,以便我再次选择 今天日期,用今天日期显示未来时间,禁用
选择日期
按钮链接的任何解决方案

您可以理解我的冲突,请使用

这里是我的代码

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>
    );
  }
}
接口AppProps{}
接口应用状态{
名称:字符串;
日期:日期;
}
类应用程序扩展组件{
建造师(道具){
超级(道具);
此.state={
名称:'反应',
日期:新日期()
};
}
//日期禁用
禁用数据(当前:任何){
//不能选择今天之前的日期和今天
//返回当前值和当前值<力矩().endOf('day');
返回电流和电流<力矩().startOf(“日”)
}
//时间禁用
getDisabledHours(){
var小时数=[];
for(设i=0;i{
var分钟=[];
如果(selectedHour==矩().hour()){
对于(var i=0;i
);
}
}

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

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)}
.....
this.setSelectedDate(d)}
.....

以下是更新后的

问题,您不清楚me@Kalhan.Toress您好,首先选择未来日期和
选择时间
8am或7am,然后再次单击
选择日期
并选择今天日期,当我单击第一次未来日期和7am或8am时。该时间显示为今天日期,因为我禁用了过去时间和今天日期,这是一个问题,您可以检查Hello,我可以为您询问一些问题吗?我怎样才能为这个添加占位符?当我添加占位符时,那一刻不起作用。你能给我发一份stackblitz,这样我就可以检查它了吗you@core114有什么问题请一步一步解决?@core114查看此内容感谢您宝贵的时间和解决方案