docs: updates for time zone

gpbl · Sep 26, 2024 · 06b2550 · 06b2550
1 parent 2f8fc63
commit 06b2550
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 65 deletions.
diff --git a/src/types/props.ts b/src/types/props.ts
@@ -267,7 +267,7 @@ export interface PropsBase {
    *
    * @since 9.1.1
    * @experimental
-   * @see https://daypicker.dev/docs/localization#time-zone
+   * @see https://daypicker.dev/docs/time-zone
    */
   timeZone?: string | undefined;
   /**

diff --git a/website/docs/docs/localization.mdx b/website/docs/docs/localization.mdx
@@ -1,18 +1,22 @@
 ---
-sidebar_position: 5
+sidebar_position: 6
 ---
 
 # Localization
 
-Learn how to set the locale, changing the time zone, and adjust other calendar options.
+DayPicker provides various options to customize the calendar for different languages and regions.
 
-## Setting the Locale
+| Prop Name               | Type                                          | Description                                                              |
+| ----------------------- | --------------------------------------------- | ------------------------------------------------------------------------ |
+| `locale`                | [`Locale`](https://date-fns.org/docs/I18n)    | Set the locale. Default is `en-US`.                                      |
+| `weekStartsOn`          | `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `7` | Change the first day of the week.                                        |
+| `firstWeekContainsDate` | `1` \| `4`                                    | Configure the first date in the first week of the year.                  |
+| `ISOWeek`               | `boolean`                                     | Switch to [ISO Week Dates](https://en.wikipedia.org/wiki/ISO_week_date). |
+| `timeZone`              | `string`                                      | The time zone (IANA or UTC offset) to use in the calendar.               |
 
-| Prop Name | Type                                       | Description                         |
-| --------- | ------------------------------------------ | ----------------------------------- |
-| `locale`  | [`Locale`](https://date-fns.org/docs/I18n) | Set the locale. Default is `en-US`. |
+## Setting the Locale
 
-To set a different locale, import the locale object from `react-day-picker/locale`and pass it to the`locale` prop.
+To change the default `en-US` to another locale, import a locale object from `react-day-picker/locale` and pass it to the`locale` prop.
 
 ```tsx
 // import the locale object
@@ -49,60 +53,9 @@ import { DayPicker, defaultLocale } from "react-day-picker";
 
 ## Changing the Time Zone {#time-zone}
 
-:::warning Experimental Feature (since v9.1.1)
-
-DayPicker supports time zones through the `date-fns` library. For more information, refer to the [date-fns time zones documentation](https://date-fns.org/v4.1.0/docs/Time-Zones). If you encounter any issues, please [report them on GitHub](https://github.com/gpbl/react-day-picker/issues). Thank you!
-
-:::
-
-| Prop Name  | Type     | Description                                    |
-| ---------- | -------- | ---------------------------------------------- |
-| `timeZone` | `string` | Set a time zone for the dates in the calendar. |
-
-Use the `timeZone` prop to set a different time zone for the calendar. See [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)
-for a list of the possible values.
-
-```tsx
-<DayPicker timeZone="UTC" /> // Use Coordinated Universal Time
-<DayPicker timeZone="Pacific/Kiritimati" /> // Use Line Islands Time
-```
-
-<BrowserWindow bodyStyle={{ justifyContent: "start" }}>
-  <Examples.TimeZone />
-</BrowserWindow>
-
-### Working with Time-Zoned Dates
-
-When working with time zones, make sure to use the `TZDate` object instead of the native `Date` object. The `TZDate` object is exported from [@date-fns/tz](https://github.com/date-fns/date-fns-tz). Refer to their documentation for more information.
+See [Time Zone docs](./time-zone.mdx) for more information.
 
-- To initialize a date in a specific time zone, create a `new TZDate()` object or the `TZDate.tz`.
-
-```tsx
-import { DayPicker, TZDate } from "react-day-picker";
-
-export function TimeZone() {
-  const timeZone = "America/New_York";
-  const [selected, setSelected] = useState<Date | undefined>(
-    new TZDate(2024, 12, 10, timeZone) // Make sure you use `TZDate` instead of `Date`
-  );
-  return (
-    <DayPicker
-      mode="single"
-      timeZone={timeZone}
-      selected={selected}
-      onSelect={setSelected}
-    />
-  );
-}
-```
-
-## Calendar Options
-
-| Prop Name               | Type                                          | Description                                                              |
-| ----------------------- | --------------------------------------------- | ------------------------------------------------------------------------ |
-| `weekStartsOn`          | `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `7` | Change the first day of the week.                                        |
-| `firstWeekContainsDate` | `1` \| `4`                                    | Configure the first date in the first week of the year.                  |
-| `ISOWeek`               | `boolean`                                     | Switch to [ISO Week Dates](https://en.wikipedia.org/wiki/ISO_week_date). |
+## Localization Options
 
 ### First Date of the Week
 

diff --git a/website/docs/docs/selection-modes.mdx b/website/docs/docs/selection-modes.mdx
@@ -6,9 +6,9 @@ sidebar_position: 4
 
 DayPicker offers predefined rules for day selection:
 
-- **[Single mode](#single-mode)**: Allows the selection of a single day.
-- **[Multiple mode](#multiple-mode)**: Enables the selection of multiple individual days.
-- **[Range mode](#range-mode)**: Allows the selection of a continuous range of days.
+- [Single mode](#single-mode): allows the selection of a single day.
+- [Multiple mode](#multiple-mode): allows the selection of multiple individual days.
+- [Range mode](#range-mode): allows the selection of a continuous range of days.
 
 The `mode` prop determines the selection mode. Use the `disabled` prop to prevent the selection of specific days. The `selected` and `onSelect` props provide customization options for the selection process.
 

diff --git a/website/docs/docs/time-zone.mdx b/website/docs/docs/time-zone.mdx
@@ -0,0 +1,46 @@
+---
+sidebar_position: 5
+---
+
+# Time Zone
+
+Use the `timeZone` prop to set the time zone for the calendar.
+
+| Prop Name  | Type     | Description                           |
+| ---------- | -------- | ------------------------------------- |
+| `timeZone` | `string` | The time zone to use in the calendar. |
+
+The time zone can be specified as either an [IANA time zone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) identifier or a UTC offset.
+
+```tsx
+<DayPicker timeZone="UTC" /> // Use Coordinated Universal Time
+<DayPicker timeZone="Pacific/Kiritimati" /> // Use Line Islands Time
+<DayPicker timeZone="+02:00" /> // Use UTC+2
+```
+
+<BrowserWindow bodyStyle={{ justifyContent: "start" }}>
+  <Examples.TimeZone />
+</BrowserWindow>
+
+### Working with Time-Zoned Dates
+
+When working with time zones, make sure to use the `TZDate` object exported by `react-day-picker` instead of the native `Date` object. For more information, refer to the [date-fns doc](https://date-fns.org/v4.1.0/docs/Time-Zones).
+
+```tsx
+import { DayPicker, TZDate } from "react-day-picker";
+
+export function TimeZone() {
+  const timeZone = "America/New_York";
+  const [selected, setSelected] = useState<Date | undefined>(
+    new TZDate(2024, 12, 10, timeZone) // Make sure you use `TZDate` instead of `Date`
+  );
+  return (
+    <DayPicker
+      mode="single"
+      timeZone={timeZone}
+      selected={selected}
+      onSelect={setSelected}
+    />
+  );
+}
+```
diff --git a/website/docs/docs/translation.mdx b/website/docs/docs/translation.mdx
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 6
+sidebar_position: 7
 ---
 
 # Translating DayPicker