1import { DatePicker, DatePickerComponents, DatePickerStyle, HStack, Image, List, Navigation, NavigationStack, Picker, Script, Section, Spacer, Text, Toggle, useMemo, useState, } from "scripting"
2
3const oneDay = 1000 * 60 * 60 * 24
4
5 function Example() {
6 const [date, setDate] = useState(() => Date.now())
7 const [startDateEnabled, setStartDateEnabled] = useState(false)
8 const [endDateEnabled, setEndDateEnabled] = useState(false)
9 const startDate = useMemo(() => Date.now() - oneDay * 7, [])
10 const endDate = useMemo(() => Date.now() + oneDay * 7, [])
11 const components = useMemo<DatePickerComponents[]>(() => [
12 'date',
13 'hourAndMinute'
14 ], [])
15 const [displayedComponents, setDisplayedComponents] = useState<DatePickerComponents[]>([
16 'date', 'hourAndMinute'
17 ])
18 const datePickerStyles = useMemo<DatePickerStyle[]>(() => [
19 'compact',
20 'graphical',
21 'wheel',
22 ], [])
23 const [selectedStyle, setSelectedStyle] = useState<DatePickerStyle>('graphical')
24
25 return <NavigationStack>
26 <List
27 navigationTitle={"DatePicker"}
28 navigationBarTitleDisplayMode={"inline"}
29 >
30 <Section>
31 <Toggle
32 title={"Use startDate"}
33 value={startDateEnabled}
34 onChanged={setStartDateEnabled}
35 />
36
37 <Toggle
38 title={"Use endDate"}
39 value={endDateEnabled}
40 onChanged={setEndDateEnabled}
41 />
42 {components.map(name =>
43 <HStack
44 contentShape={'rect'}
45 onTapGesture={() => {
46 if (displayedComponents.includes(name)) {
47 if (displayedComponents.length > 1) {
48 setDisplayedComponents(displayedComponents.filter(e => e !== name))
49 }
50 } else {
51 setDisplayedComponents([name, ...displayedComponents])
52 }
53 }}
54 >
55 <Text>Display: {name}</Text>
56 <Spacer />
57 {displayedComponents.includes(name)
58 ? <Image
59 systemName={"checkmark"}
60 foregroundStyle={"systemBlue"}
61 />
62 : undefined}
63 </HStack>
64 )}
65
66 <Picker
67 title={"DatePicker Style"}
68 value={selectedStyle}
69 onChanged={setSelectedStyle as any}
70 pickerStyle={'menu'}
71 >
72 {datePickerStyles.map(style =>
73 <Text tag={style}>{style}</Text>
74 )}
75 </Picker>
76 </Section>
77
78 <DatePicker
79 title={"DatePicker"}
80 value={date}
81 onChanged={setDate}
82 startDate={startDateEnabled ? startDate : undefined}
83 endDate={endDateEnabled ? endDate : undefined}
84 displayedComponents={displayedComponents}
85 datePickerStyle={selectedStyle}
86 />
87 </List>
88 </NavigationStack>
89}
90
91async function run() {
92 await Navigation.present({
93 element: <Example />
94 })
95
96 Script.exit()
97}
98
99run()
