I'm using the MUI 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 DateTimePicker
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>
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";