Shadcn-ui / DatePicker - 如何在选择日期时隐藏下拉日历

Question

在文档页面的最后2个示例中，https://ui.shadcn.com/docs/components/date-picker，如果您选择了日期，则需要单击下拉日历外部以将其关闭。如何在选择日期后隐藏日历下拉菜单？

蒂亚

Answer 1

基于这个答案我有：

const [calendarOpen, setCalendarOpen] = useState(false);
...
<FormField control={form.control} name={"dob"}
           render={({field}) =>
               <FormItem className={"flex flex-col pt-2"}>
                   <FormLabel>
                       Date of birth
                   </FormLabel>
                   <Popover open={calendarOpen} onOpenChange={setCalendarOpen}>
                       <PopoverTrigger asChild>
                           <FormControl>
                               <Button variant={"outline"}
                                       className={"normal-case flex justify-between pr-1"}>
                                   {!!field.value ? format(field.value, "PPP") :
                                       <span>Pick a date</span>}
                                   <CalendarIcon/>

                               </Button>
                           </FormControl>
                       </PopoverTrigger>
                       <PopoverContent align={"start"} className={"w-auto p-0"}>
                           <Calendar mode={"single"} defaultMonth={field.value}
                                     selected={field.value}
                                     onSelect={(day, selectedDay, activeModifiers, e) => {
                                         field.onChange(day, selectedDay, activeModifiers, e);
                                         setCalendarOpen(false);
                                     }}
                                     fixedWeeks
                                     weekStartsOn={1}
                                     fromDate={dobFromDate}
                                     toDate={new Date()}
                                     captionLayout={"dropdown-buttons"}
                           />

                       </PopoverContent>
                   </Popover>
                   <FormMessage/>
               </FormItem>
           }
/>

组件在表单上使用的位置。在我看来，这个日期选择器组件应该是独立的，因此我们不必像文档中那样将整个内容包含在每个日期字段中。