2 replies

How to make MUI TimePicker use UTC? (I really need this help)

Hi guys, I've been killing myself trying to do this, and I would really appreciate it if someone could help me, because I'm going crazy and I have to do this asap....
I know a lot of you guys hate MUI, but if anyone can help me, please do.

I'm using a time picker, and I need that time picker to always show time in UTC to be in sync with the backend etc.
I'm using a dayjs adapter. This is my code:

<LocalizationProvider dateAdapter={AdapterDayjs}>
        <TimePicker
          value={value}
          ampm={false}
          minTime={minimumAcceptableTime()}
          onChange={handleOnChange}
          renderInput={(params) => <TextField {...params} />}
          disabled={isTimePickerDisabled()}
        />
</LocalizationProvider>

<LocalizationProvider dateAdapter={AdapterDayjs}>
        <TimePicker
          value={value}
          ampm={false}
          minTime={minimumAcceptableTime()}
          onChange={handleOnChange}
          renderInput={(params) => <TextField {...params} />}
          disabled={isTimePickerDisabled()}
        />
</LocalizationProvider>

I tried using dayjs plugins to set current timezone as well, but no luck:

import utc from 'dayjs/plugin/utc'

import timezone from 'dayjs/plugin/timezone'

dayjs.extend(utc)

dayjs.extend(timezone)
dayjs.utc()
dayjs.tz.setDefault('Africa/Abidjan')

import utc from 'dayjs/plugin/utc'

import timezone from 'dayjs/plugin/timezone'

dayjs.extend(utc)

dayjs.extend(timezone)
dayjs.utc()
dayjs.tz.setDefault('Africa/Abidjan')

Always results in my current timezone (GMT+1):

Sat Dec 10 2022 15:15:00 GMT+0100 (Central European Standard Time)

Sat Dec 10 2022 15:15:00 GMT+0100 (Central European Standard Time)

If anyone can help, I'd really appreciate it, thanks.

How to make MUI TimePicker use UTC? (I really need this help)

<LocalizationProvider dateAdapter={AdapterDayjs}>
        <TimePicker
          value={value}
          ampm={false}
          minTime={minimumAcceptableTime()}
          onChange={handleOnChange}
          renderInput={(params) => <TextField {...params} />}
          disabled={isTimePickerDisabled()}
        />
</LocalizationProvider>

<LocalizationProvider dateAdapter={AdapterDayjs}>
        <TimePicker
          value={value}
          ampm={false}
          minTime={minimumAcceptableTime()}
          onChange={handleOnChange}
          renderInput={(params) => <TextField {...params} />}
          disabled={isTimePickerDisabled()}
        />
</LocalizationProvider>

I tried using dayjs plugins to set current timezone as well, but no luck:

import utc from 'dayjs/plugin/utc'

import timezone from 'dayjs/plugin/timezone'

dayjs.extend(utc)

dayjs.extend(timezone)
dayjs.utc()
dayjs.tz.setDefault('Africa/Abidjan')

import utc from 'dayjs/plugin/utc'

import timezone from 'dayjs/plugin/timezone'

dayjs.extend(utc)

dayjs.extend(timezone)
dayjs.utc()
dayjs.tz.setDefault('Africa/Abidjan')

Always results in my current timezone (GMT+1):

Sat Dec 10 2022 15:15:00 GMT+0100 (Central European Standard Time)

Sat Dec 10 2022 15:15:00 GMT+0100 (Central European Standard Time)

If anyone can help, I'd really appreciate it, thanks.

How to make MUI TimePicker use UTC? (I really need this help)

Similar Threads

How to make MUI TimePicker use UTC? (I really need this help)

Similar Threads

Similar Threads

Similar Threads