Skip to content

Commit 53f7c28

Browse files
segunadebayosegunadebayo
committed
docs: datepicker
1 parent b24b670 commit 53f7c28

File tree

2 files changed

+74
-10
lines changed
  • packages
    • solid/src/components/date-picker/examples
    • vue/src/components/date-picker/examples

2 files changed

+74
-10
lines changed

‎packages/solid/src/components/date-picker/examples/inline.tsx‎

Lines changed: 73 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,18 @@ import { Index } from 'solid-js'
44
export const Inline = () => {
55
return (
66
<DatePicker.Root inline>
7-
<DatePicker.Context>
8-
{(context) => (
9-
<>
10-
<DatePicker.View view="day">
7+
<DatePicker.Input />
8+
<DatePicker.View view="day">
9+
<DatePicker.Context>
10+
{(context) => (
11+
<>
1112
<DatePicker.ViewControl>
1213
<DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
1314
<DatePicker.ViewTrigger>
1415
<DatePicker.RangeText />
1516
</DatePicker.ViewTrigger>
1617
<DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
1718
</DatePicker.ViewControl>
18-
1919
<DatePicker.Table>
2020
<DatePicker.TableHead>
2121
<DatePicker.TableRow>
@@ -24,7 +24,6 @@ export const Inline = () => {
2424
</Index>
2525
</DatePicker.TableRow>
2626
</DatePicker.TableHead>
27-
2827
<DatePicker.TableBody>
2928
<Index each={context().weeks}>
3029
{(week) => (
@@ -41,10 +40,74 @@ export const Inline = () => {
4140
</Index>
4241
</DatePicker.TableBody>
4342
</DatePicker.Table>
44-
</DatePicker.View>
45-
</>
46-
)}
47-
</DatePicker.Context>
43+
</>
44+
)}
45+
</DatePicker.Context>
46+
</DatePicker.View>
47+
<DatePicker.View view="month">
48+
<DatePicker.Context>
49+
{(context) => (
50+
<>
51+
<DatePicker.ViewControl>
52+
<DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
53+
<DatePicker.ViewTrigger>
54+
<DatePicker.RangeText />
55+
</DatePicker.ViewTrigger>
56+
<DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
57+
</DatePicker.ViewControl>
58+
<DatePicker.Table>
59+
<DatePicker.TableBody>
60+
<Index each={context().getMonthsGrid({ columns: 4, format: 'short' })}>
61+
{(months) => (
62+
<DatePicker.TableRow>
63+
<Index each={months()}>
64+
{(month) => (
65+
<DatePicker.TableCell value={month().value}>
66+
<DatePicker.TableCellTrigger>{month().label}</DatePicker.TableCellTrigger>
67+
</DatePicker.TableCell>
68+
)}
69+
</Index>
70+
</DatePicker.TableRow>
71+
)}
72+
</Index>
73+
</DatePicker.TableBody>
74+
</DatePicker.Table>
75+
</>
76+
)}
77+
</DatePicker.Context>
78+
</DatePicker.View>
79+
<DatePicker.View view="year">
80+
<DatePicker.Context>
81+
{(context) => (
82+
<>
83+
<DatePicker.ViewControl>
84+
<DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
85+
<DatePicker.ViewTrigger>
86+
<DatePicker.RangeText />
87+
</DatePicker.ViewTrigger>
88+
<DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
89+
</DatePicker.ViewControl>
90+
<DatePicker.Table>
91+
<DatePicker.TableBody>
92+
<Index each={context().getYearsGrid({ columns: 4 })}>
93+
{(years) => (
94+
<DatePicker.TableRow>
95+
<Index each={years()}>
96+
{(year) => (
97+
<DatePicker.TableCell value={year().value}>
98+
<DatePicker.TableCellTrigger>{year().label}</DatePicker.TableCellTrigger>
99+
</DatePicker.TableCell>
100+
)}
101+
</Index>
102+
</DatePicker.TableRow>
103+
)}
104+
</Index>
105+
</DatePicker.TableBody>
106+
</DatePicker.Table>
107+
</>
108+
)}
109+
</DatePicker.Context>
110+
</DatePicker.View>
48111
</DatePicker.Root>
49112
)
50113
}

‎packages/vue/src/components/date-picker/examples/inline.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { DatePicker } from '@ark-ui/vue/date-picker'
44

55
<template>
66
<DatePicker.Root inline>
7+
<DatePicker.Input />
78
<DatePicker.View view="day">
89
<DatePicker.Context v-slot="api">
910
<DatePicker.ViewControl>

0 commit comments

Comments
 (0)