Skip to content

Commit

Permalink
docs: update
Browse files Browse the repository at this point in the history
  • Loading branch information
zernonia committed Mar 5, 2024
1 parent 0b8e3b1 commit 6c3b36d
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 15 deletions.
2 changes: 1 addition & 1 deletion docs/.vitepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ export default defineConfig({
{ text: 'Composition', link: '/guides/composition' },
{ text: 'Server side rendering', link: '/guides/server-side-rendering' },
{ text: 'Namespaced', link: '/guides/namespaced-components' },
{ text: 'Dates', link: '/guides/dates' },
{ text: `Dates ${BadgeHTML('New')}`, link: '/guides/dates' },
// { text: `Namespaced ${BadgeHTML('New')}`, link: '/guides/namespaced-components' },
],
},
Expand Down
3 changes: 1 addition & 2 deletions docs/content/components/combobox.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@

title: Combobox
description: Choose from a list of suggested values with full keyboard support.
name: combobox
badge: alpha
name: combobox
aria: https://www.w3.org/WAI/ARIA/apg/patterns/listbox
---

Expand Down
29 changes: 17 additions & 12 deletions docs/content/guides/dates.md
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
---
title: Dates & Times
description: How to work with dates and times in Melt's date-related builders.
description: How to work with dates and times in Radix Vue.
---



# Dates & Times

<Description>
How to work with dates and times in Melt's date-related builders.
How to work with dates and times in Radix Vue.
</Description>


::: tip
The inner-workings of our date-related builders are heavily inspired by the research and work done
by the <A href="https://react-spectrum.adobe.com/react-aria/">React Aria</A> team at Adobe, who have created
The inner-workings of our date-related components are heavily inspired by the research and work done
by the [React Aria](https://react-spectrum.adobe.com/react-aria/) team at Adobe, who have created
robust date components that excel in terms of accessibility, user experience, and flexibility.
:::

The builders we offer depend on the
The components we offer depend on the
[@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html)
package, which solves a lot of the problems that come with working with dates and times in
JavaScript.

We highly recommend reading through the documentation for the package to get a solid feel for how it
works, and you'll need to install it in your project to use the date-related builders.
works, and you'll need to install it in your project to use the date-related components.


```bash
Expand All @@ -35,15 +35,15 @@ npm install -D @internationalized/date

## Date Objects

We use the `DateValue` objects provided by <code class="neutral">@internationlized/date</code> to
represent dates in the various builders. These objects are immutable, and provide information about
We use the `DateValue` objects provided by `@internationlized/date` to
represent dates in the various components. These objects are immutable, and provide information about
the type of date they represent:

- `CalendarDate`: A date with no time component, such as <code class="neutral">2023-10-11</code>.
- `CalendarDate`: A date with no time component, such as `2023-10-11`.
- `CalendarDateTime`: A date with a time component, but without a timezone, such as
<code class="neutral">2023-10-11T12:30:00</code>.
`2023-10-11T12:30:00`.
- `ZonedDateTime`: A date with a time component and a timezone, such as
<code class="neutral">2023-10-11T21:00:00:00-04:00[America/New_York]</code>.
`2023-10-11T21:00:00:00-04:00[America/New_York]`.

The benefit of using these objects is that we can be very specific about the type of date we want,
and the behavior of the builder will adapt to that type.
Expand All @@ -62,4 +62,9 @@ This package also provides a number of parser functions that can be used to:
- and many more...

These functions are useful when you're getting dates from a database or API, and need to convert it
prior to using it in a builder, or vice versa.
prior to using it in a builder, or vice versa.


:::info
Source: [Melt UI](https://melt-ui.com/docs/dates)
:::

0 comments on commit 6c3b36d

Please sign in to comment.