Skip to content

Commit d14ecd4

Browse files
tugcekucukoglutugcekucukoglu
committed
refactor: DatePicker button and icons
1 parent 762aafc commit d14ecd4

128 files changed

Lines changed: 2026 additions & 15582 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/showcase/demo/styled/datepicker/basic-demo.tsx‎

Lines changed: 25 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,8 @@
11
'use client';
2-
import {
3-
DatePickerRootValueChangeEvent,
4-
DatePickerTableBodyInstance,
5-
DatePickerTableHeadRowInstance,
6-
useDatePickerMonthData,
7-
useDatePickerMonthOptions,
8-
useDatePickerProps,
9-
useDatePickerYearOptions
10-
} from '@primereact/types/shared/datepicker';
2+
import { ChevronLeft } from '@primeicons/react/chevron-left';
3+
import { ChevronRight } from '@primeicons/react/chevron-right';
4+
import { DatePickerRootValueChangeEvent, useDatePickerProps } from '@primereact/types/shared/datepicker';
5+
import { Button } from '@primereact/ui/button';
116
import { DatePicker } from '@primereact/ui/datepicker';
127
import * as React from 'react';
138

@@ -19,109 +14,27 @@ export default function BasicDemo() {
1914
<DatePicker.Root value={date} onValueChange={(event: DatePickerRootValueChangeEvent) => setDate(event.value)}>
2015
<DatePicker.Input />
2116
<DatePicker.Portal>
22-
<DatePicker.Container>
23-
<DatePicker.Calendar>
24-
<DatePicker.Header>
25-
<DatePicker.Prev />
26-
<DatePicker.Title>
27-
<DatePicker.SelectMonth />
28-
<DatePicker.SelectYear />
29-
<DatePicker.Decade />
30-
</DatePicker.Title>
31-
<DatePicker.Next />
32-
</DatePicker.Header>
33-
<DatePicker.Table>
34-
<DatePicker.TableHead>
35-
<DatePicker.TableHeadRow>
36-
{(instance: DatePickerTableHeadRowInstance) => {
37-
const { datepicker } = instance;
38-
const weekDays = datepicker?.weekDays as string[];
39-
40-
return (
41-
<>
42-
{weekDays.map((day, index) => (
43-
<DatePicker.TableHeadCell key={index} abbr={day}>
44-
{day}
45-
</DatePicker.TableHeadCell>
46-
))}
47-
</>
48-
);
49-
}}
50-
</DatePicker.TableHeadRow>
51-
</DatePicker.TableHead>
52-
<DatePicker.TableBody>
53-
{(instance: DatePickerTableBodyInstance) => {
54-
const { datepicker } = instance;
55-
const month = datepicker?.getIndexedMonth?.() as useDatePickerMonthData;
56-
57-
return (
58-
<>
59-
{month.dates?.map((week) => (
60-
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
61-
<>
62-
{week.map((date) => (
63-
<DatePicker.TableBodyCell key={date.day + '' + date.month} date={date}>
64-
{date.day}
65-
</DatePicker.TableBodyCell>
66-
))}
67-
</>
68-
</DatePicker.TableBodyRow>
69-
))}
70-
</>
71-
);
72-
}}
73-
</DatePicker.TableBody>
74-
<DatePicker.TableBody view="month">
75-
{(instance: DatePickerTableBodyInstance) => {
76-
const { datepicker } = instance;
77-
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
78-
79-
return (
80-
<>
81-
{Array.from({ length: 4 }).map((_, rowIndex) => (
82-
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
83-
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
84-
const monthIndex = rowIndex * 3 + colIndex;
85-
86-
return (
87-
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
88-
{month.value}
89-
</DatePicker.TableBodyCell>
90-
);
91-
})}
92-
</DatePicker.TableBodyRow>
93-
))}
94-
</>
95-
);
96-
}}
97-
</DatePicker.TableBody>
98-
<DatePicker.TableBody view="year">
99-
{(instance: DatePickerTableBodyInstance) => {
100-
const { datepicker } = instance;
101-
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
102-
103-
return (
104-
<>
105-
{Array.from({ length: 5 }).map((_, rowIndex) => (
106-
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
107-
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
108-
const yearIndex = rowIndex * 2 + colIndex;
109-
110-
return (
111-
<DatePicker.TableBodyCell key={yearIndex} year={year}>
112-
{year.value}
113-
</DatePicker.TableBodyCell>
114-
);
115-
})}
116-
</DatePicker.TableBodyRow>
117-
))}
118-
</>
119-
);
120-
}}
121-
</DatePicker.TableBody>
122-
</DatePicker.Table>
123-
</DatePicker.Calendar>
124-
</DatePicker.Container>
17+
<DatePicker.Calendar>
18+
<DatePicker.Header>
19+
<DatePicker.Prev as={Button} iconOnly variant="text" rounded severity="secondary">
20+
<ChevronLeft />
21+
</DatePicker.Prev>
22+
<DatePicker.Title>
23+
<DatePicker.SelectMonth />
24+
<DatePicker.SelectYear />
25+
<DatePicker.Decade />
26+
</DatePicker.Title>
27+
<DatePicker.Next as={Button} iconOnly variant="text" rounded severity="secondary">
28+
<ChevronRight />
29+
</DatePicker.Next>
30+
</DatePicker.Header>
31+
<DatePicker.Table>
32+
<DatePicker.TableHead />
33+
<DatePicker.TableBody />
34+
<DatePicker.TableBody view="month" />
35+
<DatePicker.TableBody view="year" />
36+
</DatePicker.Table>
37+
</DatePicker.Calendar>
12538
</DatePicker.Portal>
12639
</DatePicker.Root>
12740
</div>

0 commit comments

Comments
 (0)