reactjs: MUI : MobileDateTimePicker API: How to enter date and time with the keyboard

79 views Asked by At

I'm working with MUI's MobileDateTimePicker and encountering a couple of issues with its functionality. I want users to be able to manually enter a date and time into the TextField. However, the picker dialog currently opens whenever the TextField gains focus, which is not the desired behavior. I want the date and time picker to only appear when the user clicks the calendar/clock icon at the end of the TextField.

Here's a conceptual breakdown of the desired behaviors:

  1. The user clicks on the TextField and is able to type in a date and time directly using the keyboard.
  2. The picker dialog (calendar and clock form) should only open when the user clicks the icon on the right side of the text form, not when the TextField itself is clicked or focused.

Currently, I am using the standard MobileDateTimePicker implementation, but it seems to lack an option to differentiate between focusing the TextField for keyboard input and clicking the icon to open the picker dialog.

This is my code:

        <Controller
          name="start"
          control={control}
          render={({ field }) => (
            <MobileDateTimePicker
              {...field}
              value={new Date(field.value)}
              onChange={(newValue) => {
                if (newValue) {
                  field.onChange(fTimestamp(newValue));
                }
              }}
              label="Začetek"
              format="dd/MM/yyyy HH:mm"
              ampm={false}
              slotProps={{
                textField: {
                  fullWidth: true,
                },
              }}
            />
          )}
        />

Current Behavior: The picker dialog automatically opens whenever the TextField is clicked:

Current Behavior: The picker dialog automatically opens whenever the TextField is clicked

Desired Behavior: I want to enable users to input the date and time manually through the keyboard when they click on the TextField. The picker dialog should only open when the user clicks on the calendar/clock icon adjacent to the TextField:

Desired Behavior: I want to enable users to input the date and time manually through the keyboard when they click on the TextField. The picker dialog should only open when the user clicks on the calendar/clock icon adjacent to the TextField.

0

There are 0 answers