@material-ui/pickers#DateTimePicker TypeScript Examples

function SQFormDateTimePicker({
  name,
  label,
  size = 'auto',
  isDisabled = false,
  placeholder = '',
  onBlur,
  onChange,
  muiFieldProps = {},
}: SQFormDateTimePickerProps): JSX.Element {
  const {
    formikField: {field, helpers},
    fieldState: {isFieldError, isFieldRequired},
    fieldHelpers: {handleBlur, HelperTextComponent},
  } = useForm<Moment | null, unknown>({
    name,
    onBlur,
  });

  const [isCalendarOpen, setIsCalendarOpen] = React.useState(false);
  const handleClose = () => setIsCalendarOpen(false);
  const toggleCalendar = () => setIsCalendarOpen(!isCalendarOpen);
  const handleClickAway = () => {
    if (isCalendarOpen) {
      setIsCalendarOpen(false);
    }
  };

  const classes = useStyles();

  // An empty string will not reset the DatePicker so we have to pass null
  const value: ParsableDate<Moment> | null =
    (field.value as ParsableDate<Moment>) ?? null;

  const handleChange = (date: Moment | null): void => {
    helpers.setValue(date);
    onChange && onChange(date);
  };

  return (
    <ClickAwayListener onClickAway={handleClickAway}>
      <Grid item sm={size}>
        <DateTimePicker
          label={label}
          disabled={isDisabled}
          value={value}
          onChange={handleChange}
          onClose={handleClose}
          onOpen={toggleCalendar}
          open={isCalendarOpen}
          renderInput={(inputProps) => {
            return (
              <TextField
                {...inputProps}
                name={name}
                color="primary"
                disabled={isDisabled}
                error={isFieldError}
                fullWidth={true}
                InputLabelProps={{shrink: true}}
                FormHelperTextProps={{error: isFieldError}}
                helperText={!isDisabled && HelperTextComponent}
                placeholder={placeholder}
                onBlur={handleBlur}
                onClick={handleClickAway}
                required={isFieldRequired}
                classes={classes}
              />
            );
          }}
          {...muiFieldProps}
        />
      </Grid>
    </ClickAwayListener>
  );
}

DatePickerComponent: React.FC<Props & { theme: typeof Theme }> = ({
  value,
  onChange,
  mode,
  toggleVisibility,
  isVisible,
  theme,
}) => {
  const internalTheme = createMuiTheme({
    palette: {
      primary: {
        main: theme?.colors?.primary ?? Theme.colors.primary,
      },
      secondary: {
        main: theme?.colors?.secondary ?? Theme.colors.secondary,
      },
    },
  });

  const Picker =
    mode === "date"
      ? DatePicker
      : mode === "time"
      ? TimePicker
      : DateTimePicker;

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <ThemeProvider theme={internalTheme}>
        <Picker
          value={value}
          open={isVisible}
          onChange={(d) => {
            toggleVisibility();
            onChange(null, d);
          }}
          onClose={() => toggleVisibility()}
          variant="dialog"
          TextFieldComponent={() => null}
        />
      </ThemeProvider>
    </MuiPickersUtilsProvider>
  );
}

ShiftOverrideModal = ({
  scheduleId,
  shift,
  refetchOnCallSchedules,
  isModalOpened,
  setIsModalOpened,
}: {
  scheduleId: number;
  shift: Shift;
  refetchOnCallSchedules: () => void;
  isModalOpened: boolean;
  setIsModalOpened: (isModalOpened: boolean) => void;
}) => {
  const [
    { isLoading, users, user, start, end },
    { setUser, setStart, setEnd, setIsLoading },
  ] = useShiftOverride(shift, isModalOpened);
  const ilertApi = useApi(ilertApiRef);
  const alertApi = useApi(alertApiRef);
  const classes = useStyles();

  const handleClose = () => {
    setIsModalOpened(false);
  };

  const handleOverride = () => {
    if (!shift || !shift.user) {
      return;
    }
    setIsLoading(true);
    setTimeout(async () => {
      try {
        const success = await ilertApi.overrideShift(
          scheduleId,
          user.id,
          start,
          end,
        );
        if (success) {
          alertApi.post({ message: 'Shift overridden.' });
          refetchOnCallSchedules();
        }
      } catch (err) {
        alertApi.post({ message: err, severity: 'error' });
      }
      setIsModalOpened(false);
    }, 250);
  };

  if (!shift) {
    return null;
  }

  return (
    <Dialog
      open={isModalOpened}
      onClose={handleClose}
      aria-labelledby="override-shift-form-title"
    >
      <DialogTitle id="override-shift-form-title">Shift override</DialogTitle>
      <DialogContent>
        <MuiPickersUtilsProvider utils={LuxonUtils}>
          <Autocomplete
            disabled={isLoading}
            options={users}
            value={user}
            classes={{
              root: classes.formControl,
              option: classes.option,
            }}
            onChange={(_event: any, newValue: any) => {
              setUser(newValue);
            }}
            autoHighlight
            getOptionLabel={a => ilertApi.getUserInitials(a)}
            renderOption={a => (
              <div className={classes.optionWrapper}>
                <Typography noWrap>{ilertApi.getUserInitials(a)}</Typography>
              </div>
            )}
            renderInput={params => (
              <TextField
                {...params}
                label="User"
                variant="outlined"
                fullWidth
                inputProps={{
                  ...params.inputProps,
                  autoComplete: 'new-password', // disable autocomplete and autofill
                }}
              />
            )}
          />
          <DateTimePicker
            label="Start"
            inputVariant="outlined"
            fullWidth
            margin="normal"
            ampm={false}
            value={start}
            className={classes.formControl}
            onChange={date => {
              setStart(date ? date.toISO() : '');
            }}
          />
          <DateTimePicker
            label="End"
            inputVariant="outlined"
            fullWidth
            margin="normal"
            ampm={false}
            value={end}
            className={classes.formControl}
            onChange={date => {
              setEnd(date ? date.toISO() : '');
            }}
          />
        </MuiPickersUtilsProvider>
      </DialogContent>
      <DialogActions>
        <Button
          disabled={isLoading}
          onClick={handleOverride}
          color="primary"
          variant="contained"
        >
          Override
        </Button>
        <Button disabled={isLoading} onClick={handleClose} color="primary">
          Cancel
        </Button>
      </DialogActions>
    </Dialog>
  );
}