如何实现点击ShadCN Date-picker特定日期时弹出Dialog？

要实现点击日历日期弹出Dialog的功能，你需要添加Dialog的状态控制，并在日期选择事件中触发Dialog的显示，以下是修改后的完整代码：

"use client";

import { Calendar } from "@/components/ui/calendar";
import { useState } from "react";
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function CalendarPicker() {
  const [date, setDate] = useState<Date | undefined>(new Date());
  // 控制Dialog显示/隐藏的状态
  const [isDialogOpen, setIsDialogOpen] = useState(false);

  // 处理日期选择：设置选中日期并打开Dialog
  const handleDateSelect = (selectedDate: Date | undefined) => {
    setDate(selectedDate);
    if (selectedDate) {
      setIsDialogOpen(true);
    }
  };

  return (
    <>
      <Calendar
        mode="single"
        selected={date}
        onSelect={handleDateSelect}
        className="shadow border rounded-md h-full w-full flex"
        classNames={{
          months:
            "flex w-full flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 flex-1",
          month: "space-y-4 w-full flex flex-col",
          table: "w-full h-full border-collapse space-y-1",
          head_row: "",
          row: "w-full mt-2",
        }}
      />
      {/* 弹出的Dialog容器 */}
      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>
              {date ? date.toLocaleDateString("zh-CN", {
                year: "numeric",
                month: "long",
                day: "numeric"
              }) : "选择日期"}
            </DialogTitle>
            <DialogDescription>
              为选中的日期添加日程安排
            </DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid gap-2">
              <Label htmlFor="title">日程标题</Label>
              <Input id="title" placeholder="输入日程标题" />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="description">日程描述</Label>
              <Input id="description" placeholder="输入日程详情" />
            </div>
          </div>
          <DialogFooter>
            <Button type="button" onClick={() => setIsDialogOpen(false)}>
              取消
            </Button>
            <Button type="submit">保存日程</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}

关键修改说明： #

• 添加isDialogOpen状态变量，用于控制Dialog的显示与隐藏
• 自定义handleDateSelect方法，在选中有效日期后触发Dialog打开
• 将Dialog组件整合到JSX中，通过open属性绑定状态，onOpenChange处理关闭逻辑
• 在Dialog中展示选中的日期，并添加了日程输入的基础表单元素

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