Skip to content

Commit

Permalink
docs: modify date format
Browse files Browse the repository at this point in the history
  • Loading branch information
@vikiboss
vikiboss committed Jun 19, 2024
1 parent 4afbb08 commit 45cf6c8
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 53 deletions.
27 changes: 12 additions & 15 deletions src/use-date-format/demo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<Card>
<h3 className="mb-0">Convention Date Symbols (by default)</h3>
<Zone border="primary" row={false}>
<KeyValue labelWidth="60px" label="Format" value="YYYY-MM-DD ddd HH:mm:ss.SSS" />
<KeyValue labelWidth="60px" label="Result" value={dateTime} />
<KeyValue label="Format" value="YYYY-MM-DD ddd HH:mm:ss.SSS" />
<KeyValue label="Result" value={dateTime} />
</Zone>
<Zone border="primary" row={false}>
<KeyValue labelWidth="80px" label="Result" value={playground} />
<LabelInput labelWidth="80px" label="Template" className="flex-1" placeholder="Template" {...input.props} />
<KeyValue label="Result" value={playground} />
<LabelInput label="Template" className="flex-1" {...input.props} />
</Zone>
<h3 className="mb-0">Unicode Standard Date Symbols</h3>
<Zone border="primary" row={false}>
<KeyValue labelWidth="60px" label="Format" value="yyyy-MM-dd eee HH:mm:ss.SSS" />
<KeyValue labelWidth="60px" label="Result" value={unicodeDateTime} />
<KeyValue label="Format" value="yyyy-MM-dd eee HH:mm:ss.SSS" />
<KeyValue label="Result" value={unicodeDateTime} />
</Zone>
<Zone border="primary" row={false}>
<KeyValue labelWidth="80px" label="Result" value={unicodePlayground} />
{/* biome-ignore format: no wrap */}
<LabelInput labelWidth="80px" label="Template" className="flex-1" placeholder="Template" {...unicodeInput.props} />
<KeyValue label="Result" value={unicodePlayground} />
<LabelInput label="Template" className="flex-1" {...unicodeInput.props} />
</Zone>
</Card>
)
Expand Down
76 changes: 38 additions & 38 deletions src/use-date-format/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ import { HooksType } from '@/components'

<HooksType category='Utilities' />

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
Expand All @@ -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`.
Expand Down

0 comments on commit 45cf6c8

Please sign in to comment.