-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(date-time): 📝 separate normal & range calendars & pickers
- Loading branch information
1 parent
2e62661
commit 42545fb
Showing
87 changed files
with
1,971 additions
and
1,732 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
# DateRangePicker | ||
|
||
`DateRangePicker` component provides a way to select a a range of dates using | ||
[DateField](./datefield) & [Calendar](./calendar.md) component. It follows the | ||
[Native Input Date](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date) | ||
for the keyboard navigation & accessibility features. Support all the features | ||
as React Aria's | ||
[useDateRangePicker](https://react-spectrum.adobe.com/react-aria/useDateRangePicker.html#features). | ||
|
||
<!-- ADD_TOC --> | ||
|
||
## Usage | ||
|
||
<!-- ADD_EXAMPLE src/daterange-picker/stories/templates/DateRangePickerBasicJsx.ts --> | ||
|
||
<!-- CODESANDBOX | ||
link_title: DateRangePicker | ||
js: src/daterange-picker/stories/templates/DateRangePickerBasicJsx.ts | ||
css: src/daterange-picker/stories/templates/DateRangePickerBasicCss.ts | ||
files: [src/daterange-picker/stories/templates/UtilsJsx.ts, src/range-calendar/stories/templates/RangeCalendarBasicJsx.ts, src/datefield/stories/templates/DateFieldBasicJsx.ts] | ||
--> | ||
<!-- CODESANDBOX | ||
link_title: DateRangePicker TS | ||
tsx: src/daterange-picker/stories/templates/DateRangePickerBasicTsx.ts | ||
css: src/daterange-picker/stories/templates/DateRangePickerBasicCss.ts | ||
files: [src/daterange-picker/stories/templates/UtilsTsx.ts, src/range-calendar/stories/templates/RangeCalendarBasicTsx.ts, src/datefield/stories/templates/DateFieldBasicTsx.ts] | ||
--> | ||
|
||
## Other Examples | ||
|
||
<!-- CODESANDBOX | ||
link_title: DateRangePicker Styled | ||
js: src/daterange-picker/stories/templates/DateRangePickerStyledJsx.ts | ||
css: src/daterange-picker/stories/templates/DateRangePickerBasicCss.ts | ||
files: [src/daterange-picker/stories/templates/UtilsJsx.ts, src/range-calendar/stories/templates/RangeCalendarStyledJsx.ts, src/datefield/stories/templates/DateFieldStyledJsx.ts] | ||
--> | ||
<!-- CODESANDBOX | ||
link_title: DateRangePicker Styled TS | ||
tsx: src/daterange-picker/stories/templates/DateRangePickerStyledTsx.ts | ||
css: src/daterange-picker/stories/templates/DateRangePickerBasicCss.ts | ||
files: [src/daterange-picker/stories/templates/UtilsTsx.ts, src/range-calendar/stories/templates/RangeCalendarStyledTsx.ts, src/datefield/stories/templates/DateFieldStyledTsx.ts] | ||
--> | ||
|
||
<!-- ADD_COMPOSITION src/daterange-picker --> | ||
|
||
<!-- ADD_PROPS src/daterange-picker --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
# RangeCalendar | ||
|
||
`RangeCalendar` component provides a way to a range of dates while allowing you | ||
to style them however. All the date, month & year calculations are done | ||
internally using | ||
[@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) | ||
to provide the ease of use. It follows the | ||
[Grid Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) for the keyboard | ||
navigaiton & focus management. Support all the features as React Aria's | ||
[useRangeCalendar](https://react-spectrum.adobe.com/react-aria/useRangeCalendar.html#features). | ||
|
||
<!-- ADD_TOC --> | ||
|
||
## Usage | ||
|
||
<!-- ADD_EXAMPLE src/range-calendar/stories/templates/RangeCalendarBasicJsx.ts --> | ||
|
||
<!-- CODESANDBOX | ||
link_title: RangeCalendar | ||
js: src/range-calendar/stories/templates/RangeCalendarBasicJsx.ts | ||
css: src/range-calendar/stories/templates/RangeCalendarBasicCss.ts | ||
files: [src/calendar/stories/templates/UtilsJsx.ts] | ||
--> | ||
<!-- CODESANDBOX | ||
link_title: RangeCalendar TS | ||
tsx: src/range-calendar/stories/templates/RangeCalendarBasicTsx.ts | ||
css: src/range-calendar/stories/templates/RangeCalendarBasicCss.ts | ||
files: [src/calendar/stories/templates/UtilsTsx.ts] | ||
--> | ||
|
||
You can customize and style the ranges with CSS attribute selectors | ||
|
||
```css | ||
[data-is-range-selection] > span { | ||
/* styles for any cells between start-end (inclusive) */ | ||
} | ||
[data-is-selection-start] > span { | ||
/* styles for first selected range cell */ | ||
} | ||
[data-is-selection-end] > span { | ||
/* styles for end selected range cell */ | ||
} | ||
|
||
/* only applied if cell date is first or last of the month*/ | ||
[data-is-range-start] > span { | ||
/**/ | ||
} | ||
[data-is-range-end] > span { | ||
/**/ | ||
} | ||
``` | ||
|
||
## Other Examples | ||
|
||
<!-- CODESANDBOX | ||
link_title: Range Calendar Styled | ||
js: src/range-calendar/stories/templates/RangeCalendarStyledJsx.ts | ||
css: src/range-calendar/stories/templates/RangeCalendarBasicCss.ts | ||
files: [src/calendar/stories/templates/UtilsJsx.ts] | ||
--> | ||
<!-- CODESANDBOX | ||
link_title: Range Calendar Styled TS | ||
tsx: src/range-calendar/stories/templates/RangeCalendarStyledTsx.ts | ||
css: src/range-calendar/stories/templates/RangeCalendarBasicCss.ts | ||
files: [src/calendar/stories/templates/UtilsTsx.ts] | ||
--> | ||
|
||
<!-- ADD_COMPOSITION src/range-calendar --> | ||
|
||
<!-- ADD_PROPS src/range-calendar --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,23 +1,42 @@ | ||
# TimePicker | ||
# TimeField | ||
|
||
`TimePicker` component provides a way to select a time while giving the freedom | ||
`TimeField` component provides a way to select a time while giving the freedom | ||
to style. It follows the | ||
[Native Input Time](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time) | ||
for the keyboard navigation & accessibility features. | ||
for the keyboard navigation & accessibility features. Supports all the features | ||
of React Aria's | ||
[useTimeField](https://react-spectrum.adobe.com/react-aria/useTimeField.html#features) | ||
|
||
<!-- ADD_TOC --> | ||
|
||
## Usage | ||
|
||
<!-- ADD_EXAMPLE src/timepicker/stories/templates/TimePickerBasicJsx.ts --> | ||
<!-- ADD_EXAMPLE src/timefield/stories/templates/TimeFieldBasicJsx.ts --> | ||
|
||
<!-- CODESANDBOX | ||
link_title: TimePicker | ||
js: src/timepicker/stories/templates/TimePickerBasicJsx.ts | ||
css: src/timepicker/stories/templates/TimePickerBasicCss.ts | ||
utils: src/timepicker/stories/templates/UtilsJsx.ts | ||
link_title: TimeField | ||
js: src/timefield/stories/templates/TimeFieldBasicJsx.ts | ||
css: src/timefield/stories/templates/TimeFieldBasicCss.ts | ||
--> | ||
<!-- CODESANDBOX | ||
link_title: TimeField TS | ||
tsx: src/timefield/stories/templates/TimeFieldBasicTsx.ts | ||
css: src/timefield/stories/templates/TimeFieldBasicCss.ts | ||
--> | ||
|
||
## Other Examples | ||
|
||
<!-- CODESANDBOX | ||
link_title: TimeField Styled | ||
js: src/timefield/stories/templates/TimeFieldStyledJsx.ts | ||
css: src/timefield/stories/templates/TimeFieldBasicCss.ts | ||
--> | ||
<!-- CODESANDBOX | ||
link_title: TimeField Styled TS | ||
tsx: src/timefield/stories/templates/TimeFieldStyledTsx.ts | ||
css: src/timefield/stories/templates/TimeFieldBasicCss.ts | ||
--> | ||
|
||
<!-- ADD_COMPOSITION src/timepicker --> | ||
<!-- ADD_COMPOSITION src/timefield --> | ||
|
||
<!-- ADD_PROPS src/timepicker --> | ||
<!-- ADD_PROPS src/timefield --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.