React ant design date time picker time not update on the top

Question

I'm using my react project for ant design 3 date-time picker , i want to know how to show when select the currant date with time

here the conflict

1st select future date and select time 8 am or 7 am, , then again click select date and pick today date, when i click the 1st time future date and 7 or 8am. that time display with today date, because im disabled past time with today date, that is a issue, you can check

anyone know the solution?

stack blitz here

code part 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

Here you go, you can do something like this

1. Set the value

2. onChange check if the date is future or less than the current time, based on that you can set the date

// 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

You can target the element by css and adding display: none; property to it.

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

Answer 3

The following css seems to work for me

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

EDIT : the following script block in the index.html can get this done for you...

• When you toggle between the 'select date' and 'select time' buttons, one additional div is added to the DOM; so we seek this additional div on each click (you can add an eventlistener for keypress also if you'd like) and if we find it, we know that the button needs to be displayed - else if we get null, we hide the button;
• I don't know how you will toggle if the button dissappears, so you can change the color of the borders (in my stackblitz) to see the concept working

relevant code for <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>

updated stackblitz here