Date / Time Input

"use client";

import React, {useState} from "react";
import {DateInput} from "@brynlabs/fusion-ui";

const TIMEZONE = "America/Los_Angeles";

const formatInZone = (date: Date, timeZone?: string) =>
  date.toLocaleString("en-US", {dateStyle: "full", timeStyle: "long", timeZone});

export const DateInputExample = () => {
  const [value, setValue] = useState<Date | undefined>(new Date());
  return (
    <div style={{display: "flex", flexDirection: "column", gap: "10px"}}>
      <DateInput
        label={"Date"}
        type={"datetime"}
        timezone={TIMEZONE}
        value={value}
        onChange={setValue}></DateInput>
      <div>
        <strong>Current state</strong>
        {value ? (
          <ul>
            <li>
              ISO (UTC): <code suppressHydrationWarning>{value.toISOString()}</code>
            </li>
            <li>
              {TIMEZONE}: <code suppressHydrationWarning>{formatInZone(value, TIMEZONE)}</code>
            </li>
            <li>
              Browser local: <code suppressHydrationWarning>{formatInZone(value)}</code>
            </li>
          </ul>
        ) : (
          <p>
            <code>undefined</code>
          </p>
        )}
      </div>
    </div>
  );
};