Set timezone React-Datepicker

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');

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)}

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

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;

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}
  />
}

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

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')