reactjstypescriptmaterial-uidatetimepickermui-x-date-picker

How to set the DateTimePicker default date and time without an offset?


I'm using the MUI X DateTimePicker with a custom text input field. The issue I'm having is that when I add a date then reopen the DateTimePicker, the DateTimePicker is set to the wrong default value.

Docs: MUI X Date Time Picker

I tried hardcoding the value as shown below. When I reopen the DateTimePicker I get my local date time instead (The picker defaults to 6:30 am instead of 11:30am). Is there a way I can override this behavior? I have the component with the hardcoded dates below.

<div data-testid="date-time-picker">
    <DateTimePicker
      label={label}
      value={"2022-08-01T11:30:00Z"}
      disabled={disabled}
      onChange={() => "2022-08-01T11:30:00Z"}
      renderInput={(params: TextFieldProps) => (
        <TextField
          InputProps={params.InputProps}
          inputProps={{ ...params.inputProps, value }}
          inputRef={params.inputRef}
          setValue={setValue}
          value={value}
          label={label}
          disabled={disabled}
          required={required}
          helptext={helptext}
          errorMsg={errorMsg}
        />
      )}
   />
</div>
<LocalizationProvider dateAdapter={AdapterLuxon} adapterLocale="zu">
 ...
</LocalizationProvider>

Solution

  • My issue was actually caused by not setting the default timezone on the luxon library I was using. To fix it I added the line below and the timezone was fixed.

    import { Settings } from "luxon";
    ...
    Settings.defaultZone = "Zulu";