Time picker

1import React from 'react'
2
3import { Label } from '@/components/ui/label'
4import TimePicker from '@/components/ui/time-picker'
5
6export function TimePickerDemo() {
7    return (
8        <div className="space-y-2">
9            <Label>12 Hour Time Picker</Label>
10            <TimePicker />
11        </div>
12    )
13}
14

1import React from 'react'
2
3import { Label } from '@/components/ui/label'
4import TimePicker from '@/components/ui/time-picker'
5
6export function TimePickerMilitary() {
7    return (
8        <div className="space-y-2">
9            <Label>24 Hour Time Picker</Label>
10            <TimePicker military />
11        </div>
12    )
13}
14

1import React from 'react'
2
3import { Label } from '@/components/ui/label'
4import TimePicker from '@/components/ui/time-picker'
5
6export function TimePickerDisabled() {
7    return (
8        <div className="space-y-2">
9            <div className="space-y-2">
10                <Label>Disabled</Label>
11                <TimePicker disabled value="12:00 AM" />
12            </div>
13            <div className="space-y-2">
14                <Label>Readonly</Label>
15                <TimePicker readOnly value="23:30" military />
16            </div>
17        </div>
18    )
19}
20

1'use client'
2
3import React from 'react'
4import { useForm } from 'react-hook-form'
5import { toast } from 'sonner'
6import { z } from 'zod'
7
8import { Button } from '@/components/ui/button'
9import {
10    Form,
11    FormControl,
12    FormDescription,
13    FormField,
14    FormItem,
15    FormLabel,
16    FormMessage,
17} from '@/components/ui/form'
18import { Input } from '@/components/ui/input'
19import TimePicker from '@/components/ui/time-picker'
20import { zodResolver } from '@hookform/resolvers/zod'
21
22const MeetingSchema = z.object({
23    title: z
24        .string()
25        .min(1, { message: 'Please enter a meeting title' })
26        .max(100, { message: 'Title is too long' }),
27    startTime: z.string().min(1, { message: 'Select a start time' }),
28    endTime: z.string().min(1, { message: 'Select an end time' }),
29})
30
31export function TimePickerForm() {
32    const form = useForm<z.infer<typeof MeetingSchema>>({
33        resolver: zodResolver(MeetingSchema),
34        defaultValues: {
35            title: 'Sprint Planning',
36            startTime: '',
37            endTime: '',
38        },
39    })
40
41    function onSubmit(data: z.infer<typeof MeetingSchema>) {
42        toast('Meeting scheduled', {
43            description: `${data.title} | ${data.startTime} → ${data.endTime}`,
44        })
45    }
46
47    return (
48        <div className="flex w-60 flex-col items-center justify-center space-y-4 sm:w-80">
49            <div className="space-y-1 text-center">
50                <p className="text-primary text-2xl font-semibold tracking-tight">
51                    Schedule a meeting
52                </p>
53                <p className="text-sm">
54                    Add a title and select start/end time.
55                </p>
56            </div>
57            <Form {...form}>
58                <form
59                    onSubmit={form.handleSubmit(onSubmit)}
60                    className="w-full max-w-md min-w-sm space-y-4"
61                >
62                    <FormField
63                        name="title"
64                        control={form.control}
65                        render={({ field }) => (
66                            <FormItem>
67                                <FormLabel>Title</FormLabel>
68                                <FormControl>
69                                    <Input
70                                        placeholder="Meeting title"
71                                        {...field}
72                                    />
73                                </FormControl>
74                                <FormDescription>
75                                    What is this meeting about?
76                                </FormDescription>
77                                <FormMessage className="text-danger" />
78                            </FormItem>
79                        )}
80                    />
81
82                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
83                        <FormField
84                            name="startTime"
85                            control={form.control}
86                            render={({ field }) => (
87                                <FormItem>
88                                    <FormLabel>Start time</FormLabel>
89                                    <FormControl>
90                                        <TimePicker
91                                            value={field.value}
92                                            onValueChange={field.onChange}
93                                            placeholder="Start"
94                                        />
95                                    </FormControl>
96                                    <FormMessage className="text-danger" />
97                                </FormItem>
98                            )}
99                        />
100                        <FormField
101                            name="endTime"
102                            control={form.control}
103                            render={({ field }) => (
104                                <FormItem>
105                                    <FormLabel>End time</FormLabel>
106                                    <FormControl>
107                                        <TimePicker
108                                            value={field.value}
109                                            onValueChange={field.onChange}
110                                            placeholder="End"
111                                        />
112                                    </FormControl>
113                                    <FormMessage className="text-danger w-full" />
114                                </FormItem>
115                            )}
116                        />
117                    </div>
118
119                    <Button type="submit">Submit</Button>
120                </form>
121            </Form>
122        </div>
123    )
124}
125