反应蚂蚁设计日期时间选择器时间不在顶部更新

Question

我正在为 ant design 3 date-time picker 使用我的 React 项目，我想知道在选择带时间的葡萄干日期时如何显示

这里有冲突

第一次选择未来日期并选择时间早上 8 点或早上 7 点，然后再次选择 单击选择日期并选择今天的日期，当我第一次单击时 未来的日期和早上 7 点或 8 点。该时间显示与今天日期，因为 我用今天的日期禁用了过去的时间，这是一个问题，你可以 检查

有人知道解决办法吗？

stack blitz here

代码部分在这里

   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;
    }



    //set date
    setDate(d:any){
        console.log("date object is: ", d);
        console.log("date  is: ", d.date());
        console.log("month is: ", d.month()+1);
        console.log("year is: ", d.year());
        console.log("Time :",moment(this.state.date).format("h:mm:ss A"))
        this.setState({date: d})


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

    }

  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}}
 placeholder="Select Date & Time"
   
  />
      </div>
    );
  }
}

Answer 1

给你，你可以做这样的事情

1. 设置value

2. onChange检查日期是未来还是小于当前时间，可以根据这个设置日期

// this will display the selected date
value={moment(this.state.date)}

onChange={d => {
    // checking if selected date is greater than current time
    // if then pass as it is, else pass the current time
    const date = moment() < moment(d) ? d : moment();

    // based on that we'll set the date
    this.setState({date})
}}

WORKING DEMO

Answer 2

您可以通过 css 定位元素并添加 display: none;属性。

.ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn {
    display: none
}

Answer 3

以下 css 似乎对我有用

.ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn { display: none; }

编辑：index.html 中的以下脚本块可以为您完成这项工作...

• 当您在“选择日期”和“选择时间”按钮之间切换时，会向 DOM 添加一个额外的 div；所以我们在每次点击时寻找这个额外的 div（如果你愿意，你也可以为按键添加一个事件监听器），如果我们找到它，我们知道需要显示按钮 - 否则如果我们得到 null，我们隐藏按钮;
• 我不知道如果按钮消失，您将如何切换，因此您可以更改边框的颜色（在我的 stackblitz 中）以查看该概念是否有效

<script>的相关代码：

<script>
    window.addEventListener("click", checkClass);

function checkClass(){
    var allBtns = document.querySelector('.ant-calendar-time .ant-calendar-time-picker');
    var relevantObj = document.querySelector('.ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn');
  if (allBtns === null) {
    relevantObj.style.display = "none";
  } else {
    relevantObj.style.display = "block";
  }
}

</script>

更新stackblitz here