How to get the date value from Material UI datepicker?

Question

I am new to React and I am creating a form with a Date picker in it for scheduling appointments and since one cannot book the appointment in the past, I want the date picker to have the days before today disabled in the calendar.

I found material ui date picker that has the below code.

<KeyboardDatePicker
        clearable
        value={selectedDate}
        placeholder="10/10/2018"
        onChange={date => handleDateChange(date)}
        minDate={new Date()}
        format="MM/dd/yyyy"
      />

However, in other textfields of my form such as this one,

<TextField 
       InputProps={{
         classes: {
          notchedOutline: classes.notchedOutline
                 }
                  }}
                     value={name}
                     onChange={handleChange('name')}
                     className={classes.root}
                     autoComplete="fname"
                     name="firstName"
                     variant="outlined"
                     required
                     fullWidth
                     id="firstName"
                     label="Name"
/>

my onChange function gets the value from the textfields and console logs it but with the datepicker, it already has an onChange function that I cannot work with.

My code for getting the values from the form

const [values, setValues] = useState({
        name: '',
        phone: '',
        zipcode: '',
        appliance: '',
        date: '',
        time:'',
        error: '',
        success: false
      })
      const {name, phone, zipcode, appliance, date, time} = values;
      const handleChange = name => event =>{
        setValues({...values, error: false, [name]:event.target.value});
      }
      const ClearForm =() => {
        setValues({
          ...values,
          name: '',
          phone: '',
          zipcode: '',
          appliance: '',
          date: '',
          time:'',
        })
      }
      const reqOnlineRepair = (name, phone, zipcode, appliance, date, time) => {
        console.log(name, phone, zipcode, appliance, date, time)
      }
      const clickSubmit = (event) => {
        event.preventDefault();
        reqOnlineRepair(name, phone, zipcode, appliance, date, time);
        handleClose(); 
        ClearForm();
      }

Can someone help me get the value of date from the material ui date picker and console log it?

Answer 1

For your first point

minDate={new Date()}

Remove this property if you want to make available dates in past.

For second point

You should update your code like

<KeyboardDatePicker
  clearable
  value={selectedDate}
  placeholder="10/10/2018"
  onChange={handleChange('date')}
  format="MM/dd/yyyy"
/>

And your function code like

const handleChange = name => event =>{
  let value = '';
  if(name === 'date') { value = event } else { value = event.target.value }
  setValues({...values, error: false, [name]: value});
}