From 45cf6c8987d5d7d6ef9addd1f9374c0709c5a8d5 Mon Sep 17 00:00:00 2001 From: Viki Date: Wed, 19 Jun 2024 11:19:08 +0800 Subject: [PATCH] docs: modify date format --- src/use-date-format/demo.tsx | 27 ++++++------- src/use-date-format/index.mdx | 76 +++++++++++++++++------------------ 2 files changed, 50 insertions(+), 53 deletions(-) diff --git a/src/use-date-format/demo.tsx b/src/use-date-format/demo.tsx index c63fa339..d48bff79 100644 --- a/src/use-date-format/demo.tsx +++ b/src/use-date-format/demo.tsx @@ -3,37 +3,34 @@ import { useControlledComponent, useDateFormat, useNow } from '@shined/react-use export function App() { const now = useNow() - const dateTime = useDateFormat(now, 'YYYY-MM-DD ddd HH:mm:ss.SSS') - const unicodeDateTime = useDateFormat(now, 'yyyy-MM-dd eee HH:mm:ss.SSS', { - unicodeSymbols: true, - }) - const input = useControlledComponent('[Now is] YYYY-MM-DD ddd hh:mm:ss AA') + const dateTime = useDateFormat(now, 'YYYY-MM-DD dddd HH:mm:ss.SSS') + const input = useControlledComponent('[Now is] YYYY-MM-DD dddd hh:mm:ss AA') const playground = useDateFormat(now, input.value) - const unicodeInput = useControlledComponent('[Now is] yyyy-MM-dd eee HH:mm:ss aaaa') + const unicodeDateTime = useDateFormat(now, 'yyyy-MM-dd eeee HH:mm:ss.SSS', { unicodeSymbols: true }) + const unicodeInput = useControlledComponent('[Now is] yyyy-MM-dd eeee HH:mm:ss aaaa') const unicodePlayground = useDateFormat(now, unicodeInput.value, { unicodeSymbols: true }) return (

Convention Date Symbols (by default)

- - + + - - + +

Unicode Standard Date Symbols

- - + + - - {/* biome-ignore format: no wrap */} - + + ) diff --git a/src/use-date-format/index.mdx b/src/use-date-format/index.mdx index ca557eed..b0c71f99 100644 --- a/src/use-date-format/index.mdx +++ b/src/use-date-format/index.mdx @@ -4,10 +4,10 @@ import { HooksType } from '@/components' -A dependency-free React Hook delivering formatted date strings, similar to the `format` function found in libraries such as [dayjs#format](https://day.js.org/docs/en/display/format), [momentjs#format](https://momentjs.com/docs/#/displaying/format/), or [date-fns#format](https://date-fns.org/docs/format). +A dependency-free React Hook to format date using symbols, similar to the `format` function found in libraries such as [dayjs#format](https://day.js.org/docs/en/display/format), [momentjs#format](https://momentjs.com/docs/#/displaying/format/), or [date-fns#format](https://date-fns.org/docs/format). :::tip -By default, formatting behavior is similar to `dayjs`, `momentjs` and `date-fns@^1`, or you can set `unicodeSymbols` option to `true` to use [Unicde Standard Date Symbols](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table) which behaviors like `date-fns@^2` and above. +By default, the formatting behavior aligns with that of `dayjs`, `momentjs`, and `date-fns@^1`. You can set `unicodeSymbols` option to `true` to use [Unicde Standard Date Symbols](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table), which is similar to `date-fns@^2` and subsequent versions. ::: ## Demo @@ -27,42 +27,42 @@ import source from '!!raw-loader!./demo' ## Format Symbols -| Convention | Unicode | Same | Output | Description | -| ---------- | ------- | ---- | ------------------------ | ------------------------------------------- | -| `Yo` | - | - | 2024th | Ordinal formatted year | -| `YY` | `yy` | ❌ | 24 | Two-digit year | -| `YYYY` | `yyyy` | ❌ | 2024 | Four-digit year | -| `M` | `M` | ✅ | 1-12 | The month, beginning at 1 | -| `Mo` | - | - | 1st, 2nd, ..., 12th | The month, ordinal formatted | -| `MM` | `MM` | ✅ | 01-12 | The month, 2-digits | -| `MMM` | `MMM` | ✅ | Jan-Dec | The abbreviated month name | -| `MMMM` | `MMMM` | ✅ | January-December | The full month name | -| `D` | `d` | ❌ | 1-31 | The day of the month | -| `Do` | - | - | 1st, 2nd, ..., 31st | The day of the month, ordinal formatted | -| `DD` | `dd` | ❌ | 01-31 | The day of the month, 2-digits | -| `H` | `H` | ✅ | 0-23 | The hour | -| `Ho` | - | - | 0th, 1st, 2nd, ..., 23rd | The hour, ordinal formatted | -| `HH` | `HH` | ✅ | 00-23 | The hour, 2-digits | -| `h` | `h` | ✅ | 1-12 | The hour, 12-hour clock | -| `ho` | - | - | 1st, 2nd, ..., 12th | The hour, 12-hour clock, ordinal formatted | -| `hh` | `hh` | ✅ | 01-12 | The hour, 12-hour clock, 2-digits | -| `m` | `m` | ✅ | 0-59 | The minute | -| `mo` | - | - | 0th, 1st, ..., 59th | The minute, ordinal formatted | -| `mm` | `mm` | ✅ | 00-59 | The minute, 2-digits | -| `s` | `s` | ✅ | 0-59 | The second | -| `so` | - | - | 0th, 1st, ..., 59th | The second, ordinal formatted | -| `ss` | `ss` | ✅ | 00-59 | The second, 2-digits | -| `S` | `S` | ✅ | 0-9 | The millisecond, 1-digits | -| `SS` | `SS` | ✅ | 00-99 | The millisecond, 2-digits | -| `SSS` | `SSS` | ✅ | 000-999 | The millisecond, 3-digits | -| `A` | - | - | AM PM | The meridiem | -| `AA` | - | - | A.M. P.M. | The meridiem, periods | -| `a` | `aaaa` | ❌ | am pm | The meridiem, lowercase | -| `aa` | - | - | a.m. p.m. | The meridiem, lowercase and periods | -| `d` | - | - | 0-6 | The day of the week, with Sunday as 0 | -| `dd` | `eeeee` | ❌ | S-S | The min name of the local day of the week | -| `ddd` | `eee` | ❌ | Sun-Sat | The short name of the local day of the week | -| `dddd` | `eeee` | ❌ | Sunday-Saturday | The name of the local day of the week | +| Convention | Unicode | Output | Description | Same | +| ---------- | ------- | ------------------------ | ------------------------------------------- | ---- | +| `Yo` | - | 2024th | Ordinal formatted year | - | +| `YY` | `yy` | 24 | Two-digit year | ❌ | +| `YYYY` | `yyyy` | 2024 | Four-digit year | ❌ | +| `M` | `M` | 1-12 | The month, beginning at 1 | ✅ | +| `Mo` | - | 1st, 2nd, ..., 12th | The month, ordinal formatted | - | +| `MM` | `MM` | 01-12 | The month, 2-digits | ✅ | +| `MMM` | `MMM` | Jan-Dec | The abbreviated month name | ✅ | +| `MMMM` | `MMMM` | January-December | The full month name | ✅ | +| `D` | `d` | 1-31 | The day of the month | ❌ | +| `Do` | - | 1st, 2nd, ..., 31st | The day of the month, ordinal formatted | - | +| `DD` | `dd` | 01-31 | The day of the month, 2-digits | ❌ | +| `H` | `H` | 0-23 | The hour | ✅ | +| `Ho` | - | 0th, 1st, 2nd, ..., 23rd | The hour, ordinal formatted | - | +| `HH` | `HH` | 00-23 | The hour, 2-digits | ✅ | +| `h` | `h` | 1-12 | The hour, 12-hour clock | ✅ | +| `ho` | - | 1st, 2nd, ..., 12th | The hour, 12-hour clock, ordinal formatted | - | +| `hh` | `hh` | 01-12 | The hour, 12-hour clock, 2-digits | ✅ | +| `m` | `m` | 0-59 | The minute | ✅ | +| `mo` | - | 0th, 1st, ..., 59th | The minute, ordinal formatted | - | +| `mm` | `mm` | 00-59 | The minute, 2-digits | ✅ | +| `s` | `s` | 0-59 | The second | ✅ | +| `so` | - | 0th, 1st, ..., 59th | The second, ordinal formatted | - | +| `ss` | `ss` | 00-59 | The second, 2-digits | ✅ | +| `S` | `S` | 0-9 | The millisecond, 1-digits | ✅ | +| `SS` | `SS` | 00-99 | The millisecond, 2-digits | ✅ | +| `SSS` | `SSS` | 000-999 | The millisecond, 3-digits | ✅ | +| `A` | - | AM PM | The meridiem | - | +| `AA` | - | A.M. P.M. | The meridiem, periods | - | +| `a` | `aaaa` | am pm | The meridiem, lowercase | ❌ | +| `aa` | - | a.m. p.m. | The meridiem, lowercase and periods | - | +| `d` | - | 0-6 | The day of the week, with Sunday as 0 | - | +| `dd` | `eeeee` | S-S | The min name of the local day of the week | ❌ | +| `ddd` | `eee` | Sun-Sat | The short name of the local day of the week | ❌ | +| `dddd` | `eeee` | Sunday-Saturday | The name of the local day of the week | ❌ | > Meridiem can be customized by `customMeridiem` in `options`.