CODEWITHSUNDEEP
reactjsdatepickermodal-dialogmaterial-uifocus
Dave
Dave

Reputation: 19340

How do I spawn my date picker UI upon first clicking on the date text field?

I'm using React 16.13.0 and material's KeyboardDatePicker component -- https://material-ui-pickers.dev/api/KeyboardDatePicker . I have set it up like so ...

import {
  KeyboardDatePicker,
  KeyboardTimePicker,
  MuiPickersUtilsProvider,
} from "@material-ui/pickers";
...

          <KeyboardDatePicker
            margin="normal"
            id="date-pickUp"
            label="Select Date"
            format="MM/dd/yyyy"
            value={pickUpDateLabel}
            onChange={(date) => handleDate(date, "pickUp")}
            KeyboardButtonProps={{
              "aria-label": "change date",
            }}
          />

The thing I'd like to tweak is that when I click on the text field where you can type in the date or click the icon graphic to bring up the date picker, I would like the date picker UI to come up automatically. I'm not sure how to configure things though such that as soon as I click on the text field, the UI for the date picker pops up.

Edit: I'm unable to get a working app up with the code but here's a screen shot of the text field that is rendered by default with the icon at the right ...

enter image description here

Right now you have to click on that icon for the date picker to come up, but I would like to be able to click on the text field and immediately have the date picker appear.

Edit 2: Screen shot in response to answer given ...

enter image description here

Upvotes: 10

Views: 15180

Answers (3)

Adam Farmer
Adam Farmer

Reputation: 91

For anyone who uses updated material-ui library (v5), you can use open={bool} attribute to make use of when to open DatePicker.

           const [dateOpen,setDateOpen] = useState(false);
           const [dueDate,setDueDate] = useState(new Date());
                <DatePicker
                  clearable={true}
                  open={dateOpen}
                  onClose={() => setDateOpen(false)}
                  label="Due Date"
                  value={dueDate}
                  minDate={new Date()}
                  onChange={(newValue) => {
                    setDueDate(newValue);
                  }}
                  renderInput={(params) => (
                    <TextField
                      {...params}
                      onClick={() => setDateOpen(true)}
                    />
                  )}
                />

Upvotes: 6

thodwris
thodwris

Reputation: 1377

For anyone else interested I came up with the following solution:

  1. You change the KeyboardDatePicker to DatePicker
  2. You take advantage of InputProps and add the calendar icon
    InputProps={{
        endAdornment: (
            <InputAdornment>
                <Event />
            </InputAdornment>
        )
     }}

Working sandbox: https://codesandbox.io/s/customicon-forked-zitm9?file=/src/DatePicker.js

Upvotes: 2

Dekel
Dekel

Reputation: 62676

Multiple issues to handle while solving this:

  1. Since you want to the focus on the Input to control the opening of the DatePicker Popover - has to be a controlled component (which you control the opening of it using a state.
    This state is actually the open prop of the KeyboardDatePicker
  2. Next issue is that once the Popover is closed - the focus is getting back to the Input, and once we have a focus the the Popover will open (not good). We can solve this using the disableRestoreFocus prop of the Popover.
  3. We need to use the onFocus of the Input to open the Popover, but the onClose of the Popover to actually close it (because we control the open-state of the Popover).
  4. Lastly - the icon is no longer controlling the opening of the Popover. We need to do this, using the onFocus of the KeyboardButtonProps.

This is the complete code:

const KeyDatePickerContainer = () => {
  const [selectedDate, handleDateChange] = useState(null);
  const [isOpen, setIsOpen] = useState(false);

  return (
    <KeyboardDatePicker
      variant="inline"
      value={selectedDate}
      inputVariant="outlined"
      label="With keyboard"
      format="MM/dd/yyyy"
      onChange={newDate => {
        handleDateChange(newDate);
      }}
      KeyboardButtonProps={{
        onFocus: e => {
          setIsOpen(true);
        }
      }}
      PopoverProps={{
        disableRestoreFocus: true,
        onClose: () => {
          setIsOpen(false);
        }
      }}
      InputProps={{
        onFocus: () => {
          setIsOpen(true);
        }
      }}
      open={isOpen}
    />
  );
};

Here is a link to a working example: https://codesandbox.io/s/material-pickers-open-modal-click-on-text-kjgjk

Update: if you want to also close the DatePicker once the date was selected you can use the onChange function to not only set the new date, but also close the Popover:

onChange={newDate => {
    handleDateChange(newDate);
    setIsOpen(false); // Add this
}}

Upvotes: 14

Related Questions