Material-ui-pickers: Hide ok button when autoOk is true or create a new property to hide ok button

[filipenevola]

Hello, I'm just starting with ui-pickers components and I got a minor UX problem.

Environment

any

Steps to reproduce

1. Use DatePicker with autoOk set to true

Expected behavior

Cancel button align to the right and no ok button on screen when autoOk is set to true OR a new property like showOkButton

Actual behavior

Ok button appears on screen, if I pass okLabel as empty it is gone but the cancel button still far from the right side border because the ok button is there, only without a visible label

Live example

Not need, it is very simple to check

Thanks!

[dmtrKovalenko]

Hmm, its just really weird feature request. What if user needs only change the date without time, he would like to approve changes - and there is no submit button.

I am actually cannot understand this feature ❓

[dmtrKovalenko]

Anyway I`m not aware of the new prop, so if you need to - I will approve the PR, but please describe the flow :)

[cherniavskii]

In case of DateTimePicker I think Ok button is necessary (like @dmtrKovalenko described).

But we can leave decision for developers, providing the way to hide buttons.

I would suggest to hide button completely if empty string label is provided.
So if provided okLabel='' - ok button will be not rendered at all.

[filipenevola]

Ok, I'll work on that in my release sprint.

Thanks for your reply ;)

[AbhishekVG]

Even now, when okLabel is set for empty string, button is getting rendered,
Isn't there any way to hide ok and cancel buttons?

[ghost]

Action buttons are part of the material-ui DialogActions component. You can hide this section using CSS overrides within your material-ui theme. For example:

createMuiTheme({
  overrides: {
    MuiPickersModal: {
      dialogAction: {
        display: "none"
      }
    }
  }
})

[ahmad-rzk]

Hi,
Is there a way to style for example : the [OK] button independently from the [cancel],
because as you already know "dialogAction" will be applied on all elements in the section.

[karvai]

Updated snippet, to disable "Cancel" and "OK". In case if someone needs it.

const THEME = createMuiTheme({
  overrides: {
    MuiDialogActions: {
      root: {
        display: 'none',
      },
    },
    MuiPickersSlideTransition: {
      transitionContainer: {
        marginBottom: 12,
      },
    },
  },
})

[ttibau]

Can I override only the date picker?
When I do this all of my dialog lost the action buttons.

Thanks