Datetime Picker Locale

PreviousNext

component for the Datetime Picker Locale

Docs
spectrumuicomponent

Preview

Loading preview…
app/registry/datetime-picker/usage/datetime-picker-locale.tsx
"use client";
import React, { useState } from "react";
import { DateTimePicker } from "@/components/ui/datetime-picker";
import { zhTW } from "date-fns/locale";
import { InlineCode } from "@/components/ui/inline-code";
const DatetimePickerLocale = () => {
  const [date, setDate] = useState<Date | undefined>(undefined);
  return (
    <div className="flex w-72 flex-col gap-3">
      <p>
        The following example is <InlineCode>zhTW</InlineCode> from{" "}
        <InlineCode>date-fns</InlineCode>.
      </p>
      <DateTimePicker
        locale={zhTW}
        value={date}
        onChange={setDate}
        weekStartsOn={undefined}
        showWeekNumber={undefined}
        showOutsideDays={undefined}
      />
    </div>
  );
};

export default DatetimePickerLocale;

Installation

npx shadcn@latest add @spectrumui/datetime-picker-locale

Usage

import { DatetimePickerLocale } from "@/components/datetime-picker-locale"
<DatetimePickerLocale />