Shadcn-ui DatePicker：选择日期后如何隐藏下拉日历

Shadcn-ui的DatePicker基于Radix UI构建，要实现选择日期后自动关闭弹窗，核心是通过控制弹窗的open状态，结合组件的onSelect事件来完成：

单日期选择场景 #

1. 先通过useState声明控制弹窗显示的状态和日期状态：

import { useState } from "react";
import { DatePicker } from "@/components/ui/date-picker";

export function DatePickerDemo() {
  const [open, setOpen] = useState(false);
  const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined);
  
  // ...
}

2. 在DatePickerCalendar组件的onSelect事件中，同时更新日期状态并关闭弹窗：

<DatePicker open={open} onOpenChange={setOpen}>
  <DatePickerTrigger asChild>
    <Button variant="outline">选择日期</Button>
  </DatePickerTrigger>
  <DatePickerContent>
    <DatePickerCalendar
      mode="single"
      selected={selectedDate}
      onSelect={(value) => {
        setSelectedDate(value);
        setOpen(false); // 选择后关闭弹窗
      }}
      initialFocus
    />
  </DatePickerContent>
</DatePicker>

日期范围选择场景（对应文档最后两个示例） #

如果是范围选择（比如日期区间、预设选择），可以在onSelect中判断是否已选完完整区间，再关闭弹窗：

import { useState } from "react";
import { DatePicker } from "@/components/ui/date-picker";

export function DateRangePickerDemo() {
  const [open, setOpen] = useState(false);
  const [selectedRange, setSelectedRange] = useState<{
    start: Date | undefined;
    end: Date | undefined;
  }>({ start: undefined, end: undefined });
  
  return (
    <DatePicker open={open} onOpenChange={setOpen}>
      <DatePickerTrigger asChild>
        <Button variant="outline">选择日期范围</Button>
      </DatePickerTrigger>
      <DatePickerContent>
        <DatePickerCalendar
          mode="range"
          selected={selectedRange}
          onSelect={(value) => {
            setSelectedRange(value);
            // 当开始和结束日期都已选择时，关闭弹窗
            if (value.start && value.end) {
              setOpen(false);
            }
          }}
          initialFocus
        />
      </DatePickerContent>
    </DatePicker>
  );
}

原理很直接：利用onSelect事件捕获用户的选择操作，在更新日期数据的同时，调用setOpen(false)切换弹窗的显示状态，就能实现选择后自动关闭的效果。

内容的提问来源于stack exchange，提问作者boggy