CODEWITHSUNDEEP
reactjsreact-datepicker
MarksCode
MarksCode

Reputation: 8584

Set timezone React-Datepicker

I'm using the react-datepicker to let user select a date. However, right now it uses local time (PDT), but I want to hardcode it to use a specific timezone (PST).

I tried using utcOffset prop but it doesn't seem to be doing anything. Does anyone know how to accomplish this?

Upvotes: 31

Views: 55482

Answers (10)

Manan Arora
Manan Arora

Reputation: 1

{isStartPickerVisible && (
  <DateTimePicker
    value={startDate ? moment(startDate).toDate() : new Date()}
    mode="date"
    display={Platform.OS === 'ios' ? 'spinner' : 'default'}
    onChange={(event, selectedDate) => {
      setStartPickerVisible(false);
      if (selectedDate) {
        setStartDate(moment(selectedDate).startOf('day').toISOString());
      }
    }}
  />
)}

{isEndPickerVisible && (
  <DateTimePicker
    value={endDate ? moment(endDate).toDate() : new Date()}
    mode="date"
    display={Platform.OS === 'ios' ? 'spinner' : 'default'}
    onChange={(event, selectedDate) => {
      setEndPickerVisible(false);
      if (selectedDate) {
        setEndDate(moment(selectedDate).startOf('day').toISOString());
      }
    }}
  />
)}

Upvotes: -1

Tuan
Tuan

Reputation: 1

I use dayjs and it worked well for me:

import dayjs from "dayjs";
import timezone from "dayjs/plugin/timezone";

// Initialize dayjs timezone plugin
dayjs.extend(timezone);

interface DatePickerProps {
  date: string | undefined;
  setDate: (date: string | undefined) => void;
}

// Handler for date/time changes
const handleDateTimeChange = React.useCallback(
  (selectedDateTime: Date | null) => {
    const isoFormattedDateTime = selectedDateTime
      ? dayjs(selectedDateTime).format("YYYY-MM-DDTHH:mm:ss.SSS[Z]")
      : undefined;
    setDate(isoFormattedDateTime);
  },
  [setDate]
);

// Convert ISO datetime to local datetime
const convertToLocalDateTime = (isoDateTime: string | undefined): Date | null => {
  if (!isoDateTime) return null;

  // Get browser's timezone offset in seconds
  const browserTimezoneOffset = new Date().getTimezoneOffset() * 60;
  
  // Get user's timezone offset in format like "+01:00"
  const userTimezoneOffset = dayjs()
    .tz(Intl.DateTimeFormat().resolvedOptions().timeZone)
    .format("Z");

  // Convert ISO datetime to local time
  const timestampInSeconds = dayjs(isoDateTime).unix();
  const localTimestampInSeconds = timestampInSeconds + browserTimezoneOffset;

  // Format the local datetime with the user's timezone offset
  const localIsoDateTime = dayjs
    .unix(localTimestampInSeconds)
    .format(`YYYY-MM-DDTHH:mm:ss.SSS[${userTimezoneOffset}]`);

  return dayjs(localIsoDateTime).toDate();
};

// Usage in component
<ReactDatePicker
  selected={convertToLocalDateTime(date)}
  onChange={handleDateTimeChange}
/>

Upvotes: 0

Ryan
Ryan

Reputation: 24035

Other answers didn't work as I'd hoped, and sometimes the dates were off by 1 day because of time zone differences.

This is what I needed:

import DatePicker from 'react-datepicker';

import 'react-datepicker/dist/react-datepicker.css';
import { getEndOfDayUtc, treatLocalDateAsUtcMidnight, treatUtcMidnightAsLocalDate } from '../../../shared/helpers/datetime';

type DatePickerUtcProps = {
  selected: Date | string;
  onChange: any;
  isEndOfDay: boolean;
};

function getSelectedAsLocal(selected: Date | string): Date {
  const selectedDate = typeof selected === 'string' ? new Date(selected) : selected;

  return treatUtcMidnightAsLocalDate(selectedDate);
}

export function DatePickerUtc({ selected, onChange, isEndOfDay, ...datePickerProps }: DatePickerUtcProps): JSX.Element {
  function onChangeAsUtc(local: Date) {
    const utc = treatLocalDateAsUtcMidnight(local);
    const adjusted = isEndOfDay ? getEndOfDayUtc(utc) : utc;
    console.log('onChangeAsUtc', { local, utc, adjusted, isEndOfDay });
    onChange(adjusted);
  }

  return <DatePicker onChange={onChangeAsUtc} selected={getSelectedAsLocal(selected)} {...datePickerProps} />;
}

export function treatLocalDateAsUtcMidnight(localDate: Date): Date {
  const moment = dayjs(localDate).tz('UTC', true); // https://day.js.org/docs/en/plugin/timezone
  const utcMidnight = getStartOfDayUtc(moment.toDate());
  console.log({ localDate, utcMidnight });
  return utcMidnight;
}

export function treatUtcMidnightAsLocalDate(utcMidnight: Date): Date {
  const sliceOfJustTheDatePart = utcMidnight.toISOString().slice(0, 10);
  const localDate = dayjs(sliceOfJustTheDatePart).toDate();

  console.log({ localDate, sliceOfJustTheDatePart, utcMidnight });
  return localDate;
}

From: <DatePickerUtc selected={startDate} onChange={(utcDate: Date) => setStartDate(utcDate)} {...datePickerProps} />
To: <DatePickerUtc selected={endDate} onChange={(utcDate: Date) => setEndDate(utcDate)} {...datePickerPropsEndOfDay} />

Upvotes: 0

bbsimonbb
bbsimonbb

Reputation: 29002

This component outputs Date objects set to midnight local-time at the start of the chosen day. This is a problem. If there is a way of configuring this behaviour, I haven't found it.

The only way to stay sane when dealing with dates is to make sure that your dates are always midnight UTC at the start of the date in question. To get this behaviour from react-datepicker, the only thing I've found is to subtract the timezone offset from the output...

interface IProps {
  value: any
  setValue: (value: Date) => void
}

const DayPicker: FC<IProps> = ({ value, setValue, placeholderText = "", minDate = new Date() }) => {
  function correctToUtcThenSet(val: Date) {
    setValue(new Date(val.getTime() - val.getTimezoneOffset() * 60000))
  }
  return <DatePicker
    onChange={correctToUtcThenSet}
    selected={value}
  />
}

Upvotes: 1

Julian Schroeter
Julian Schroeter

Reputation: 61

since datepicker doesn't use moment.js anymore i tried to implement a hacky solution for this issue, assuming the initial value is a string for instance:

export const formatUTC = (dateInt, addOffset = false) => {
    let date = (!dateInt || dateInt.length < 1) ? new Date : new Date(dateInt);
    if (typeof dateInt === "string") {
        return date;
    } else {
        const offset = addOffset ? date.getTimezoneOffset() : -(date.getTimezoneOffset());
        const offsetDate = new Date();
        offsetDate.setTime(date.getTime() + offset * 60000)
        return offsetDate;
    }
}

inside date i call the formatter like this: 

selected={formatUTC(this.props.input.value,true)}
                    onChange={date => formatUTC(date)}

Upvotes: 5

Martin Liptak
Martin Liptak

Reputation: 61

This works for me:

import React, { ComponentProps } from "react"
import DatePicker from "react-datepicker"
import moment from "moment"

interface Props {
  timezone: string
}

const DatePickerWithTimezone = ({
  selected,
  onChange,
  timezone,
  ...props
}: Props & ComponentProps<typeof DatePicker>) => (
  <DatePicker
    selected={selected ? setLocalZone(selected, timezone) : null}
    onChange={(v, e) => {
      onChange(v ? setOtherZone(v, timezone) : null, e)
    }}
    {...props}
  />
)

const setLocalZone = (date: Date, timezone: string) => {
  const dateWithoutZone = moment
    .tz(date, timezone)
    .format("YYYY-MM-DDTHH:mm:ss.SSS")
  const localZone = moment(dateWithoutZone).format("Z")
  const dateWithLocalZone = [dateWithoutZone, localZone].join("")

  return new Date(dateWithLocalZone)
}

const setOtherZone = (date: Date, timezone: string) => {
  const dateWithoutZone = moment(date).format("YYYY-MM-DDTHH:mm:ss.SSS")
  const otherZone = moment.tz(date, timezone).format("Z")
  const dateWithOtherZone = [dateWithoutZone, otherZone].join("")

  return new Date(dateWithOtherZone)
}

export default DatePickerWithTimezone

Upvotes: 6

Matt2772
Matt2772

Reputation: 79

For my part I set the defaultTimezone before rendering the React-dates plugin. React-dates will just use the default timezone.

moment.tz.setDefault('America/Los_Angeles');

Upvotes: 7

Manuel Machado
Manuel Machado

Reputation: 76

I've been thru this, If you decided that you want to just ignore your local offset then you can hardcode the zone. Observation just to give a complete answer: PST will always be -08:00, but if you want for example pacific time, right now is -07:00, in this case, you may want to install 'moment.timezone' then import moment from 'moment-timezone' and just get the current offset with moment.tz('US/Pacific').format('Z')

The code in typescript (I can change it to Javascript if you want):

interface ICalendarInputProps {
  handleChange: (newDate: moment.Moment) => void;
}

const CalendarInput = ({ handleChange }: ICalendarInputProps) => {
  const onChange = (date: Date) => {
    handleChange(moment(`${moment(date).format('YYYY-MM-DDThh:mm:ss')}-08:00`));
    // This is to get the offset from a timezone: handleChange(moment(`${moment(date).format('YYYY-MM-DDThh:mm:ss')}${moment.tz('US/Pacific').format('Z')}`));
  };

  return (<DatePicker onChange={onChange} />);
};

export default CalendarInput;

Upvotes: 1

buhbang
buhbang

Reputation: 715

Since you're using moment.js, you can try using moment.utc() and subtract hours to pst timezone.

moment.utc().startOf('day').subtract(8, 'hours')

Upvotes: -4

nanobar
nanobar

Reputation: 66355

I also didn't have luck with utcOffset. You could use moment-timezone in your project instead of moment and convert it yourself:

import moment from "moment-timezone";

onDateChange = date => {
  console.log("as is:", date.format("YYYY-MM-DD HH:mm:ss"));
  console.log("PST:", moment(date).tz("America/Los_Angeles").format("YYYY-MM-DD HH:mm:ss"));
};

Sandbox: https://codesandbox.io/s/y2vwj9mwpz

Upvotes: -1

Related Questions