Material-ui-pickers: [Datepicker] - add ok and cancel button

Created on 20 May 2020  路  7Comments  路  Source: mui-org/material-ui-pickers

  • [x] The issue is present in the latest release.
  • [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 馃槸

I don't know why I don't find how to add the ok cancel button (It works in the past)
image

Expected Behavior 馃

expected to have the ok and cancel buttons.
image

Context 馃敠


image

Your Environment 馃寧

| Tech | Version |
| ----------- | ------- |
| Material-UI | v 4.0.0-alpha.7 |
| React | |
| Browser | |
| TypeScript | |
| etc. | |

enhancement

Most helpful comment

A couple of buttons and there use cases that come to mind for the date picker:

  • "OK" when we don't want the "autoOK" behavior
  • "Today" bottom when we get lost
  • "Clear" if we want to reset the value to null

That could potentially be useful. I don't know if it's something that should be built-in, or only provide a customization point for doing it.

All 7 comments

There is no way to display dialog buttons on the desktop with <DatePicker />.
The only option is to use MobileDatePicker.

A couple of buttons and there use cases that come to mind for the date picker:

  • "OK" when we don't want the "autoOK" behavior
  • "Today" bottom when we get lost
  • "Clear" if we want to reset the value to null

That could potentially be useful. I don't know if it's something that should be built-in, or only provide a customization point for doing it.

We could think about some option to render anything after the calendar. It could be helpful for buttons or displaying related helper information for users. Something like renderBottomInfo.

For instance react-dates have the following prop

<DateRangePickerWrapper calendarInfoPosition="bottom" renderCalendarInfo={renderCalendarInfo} autoFocus />

http://airbnb.io/react-dates/?path=/story/drp-calendar-props--with-info-panel-bottom

A random thought on the possible API:

```jsx
renderPopup={(props) => {





}}
/>

good thanks!

how can I override the 'OK' and 'Cancel' text from KeyboardDatePicker?

What do you want to do? do you want to change the ok text? if yes use the okLabel
image

okLabel='Done'

Was this page helpful?
0 / 5 - 0 ratings

Related issues

filipenevola picture filipenevola  路  4Comments

basselAhmed picture basselAhmed  路  3Comments

brett-patterson picture brett-patterson  路  3Comments

nicky-dev picture nicky-dev  路  3Comments

idrm picture idrm  路  3Comments