DatePicker's cancel and ok button click handler

[Tengchiayueh]

I think we need to listen the event of DatePicker's cancel and ok button.

Just run handler props in _handleCancelTouchTap and _handleOKTouchTap, that is it!

Isn't it simple and distinct? Why we didn't do it.

[oliviertassinari]

What's your issue?

[JLHwung]

@Prometheuser would like to use the cancel button in the dialog to clear the DatePicker. This issue duplicates #1529.

[Vishal0203]

@nathanmarks Why is this closed? This is not a duplicate to the referenced issue.
I might use cancel click to un-check a checkbox etc.
@oliviertassinari Any thoughts on adding this?

[dgaurav-163]

yes why it's closed? We are getting same problem. Please suggest How we fix it?

[ysweid]

Any update or plan on this issue ?

I would like to know whether the user has clicked "Cancel" or "OK". That would be quite helpful if we had listeners on action buttons of date/time pickers.

Edit:
onDismiss is provided in props, but onAccept seems to be ignored for some reason.

Edit 2:
I managed to get it working, by overriding handleAcceptDialog for TimePicker and overriding handleAccept for DatePicker.

TimePicker is added as:

<TimePicker id="timePicker" onDismiss={() => {console.log("Cancel is clicked")}} ref={this.setTimePickerInput} minutesStep={5}/>

setTimePickerInput = (input) => {
    input.handleAcceptDialog = (time) => console.log("OK is clicked", time)
    this.timePickerInput = input
}

DatePicker would be:

<DatePicker id="datePicker" onDismiss={() => {console.log("Cancel is clicked")}} ref={this.setDatePickerInput}/>

setDatePickerInput = (input) => {
    input.handleAccept = (date) => console.log("OK is clicked", date)
    this.datePickerInput = input
}

Then I used this.timePickerInput or this.datePickerInput to openDialog as:

this.timePickerInput.openDialog();

I would suggest to have onAccept prop for the sake of consistency with onDismiss.

[SunasaraHasanali]

<MobileDatePicker
open={open}
disableFuture
onClose={(e) => setOpen(false)}
value={missingDate}
onChange={(value) => setMissingDate(value)}
localeText={{ toolbarTitle: t('missing_days') }}
slotProps={{
actionBar: {
actions: ['cancel', 'accept'],
onAccept: handleCloseWithUpdate
},
textField: {
fullWidth: true,
margin: 'normal',
sx: { display: 'none' }
},
}}
/>