如何在Shadcn UI日期选择器onSelect中调用自定义函数并存入useState

你可以通过自定义onSelect回调函数，同时完成表单状态更新、自定义函数调用以及额外的useState状态存储，具体实现如下：

1. （可选）声明自定义useState存储日期
   如果需要把选中日期单独存在自己的状态里，先在组件内添加状态声明：

import { useState } from 'react';

// ... 其他组件代码

const [selectedDate, setSelectedDate] = useState<Date | undefined>();

2. 修改Calendar的onSelect回调
   替换原来的field.onChange为自定义函数，在里面依次处理表单状态更新、自定义状态存储和自定义逻辑：

<Calendar
  mode="single"
  selected={field.value}
  onSelect={(date) => {
    // 1. 先更新react-hook-form的表单字段状态
    field.onChange(date);
    // 2. （可选）把日期存入自定义useState
    setSelectedDate(date);
    // 3. 调用你的自定义函数
    yourCustomDateHandler(date);
  }}
  disabled={(date) =>
    date > new Date() || date < new Date("1900-01-01")
  }
  initialFocus
/>

3. 定义你的自定义处理函数
   根据业务需求编写自定义逻辑，示例如下：

const yourCustomDateHandler = (date: Date | undefined) => {
  if (!date) return;
  // 这里写你的业务逻辑，比如打印日期、触发接口请求等
  console.log("选中的日期：", date);
};

完整修改后的代码片段 #

import { useState } from 'react';
import { format } from 'date-fns';
// ... 其他必要导入

// 自定义日期处理函数
const yourCustomDateHandler = (date: Date | undefined) => {
  if (!date) return;
  console.log("选中日期格式化后：", format(date, "EEEE, d MMM yyyy"));
};

// ... 组件其他逻辑

return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        <div className="grid grid-cols-3 gap-6">
          <div className="w-full">
            <FormField
              control={form.control}
              name="date"
              render={({ field }) => (
                <FormItem >
                  <FormLabel>Appointment Date</FormLabel>
                  <Popover>
                    <PopoverTrigger asChild>
                      <FormControl>
                        <Button
                          variant="outline"
                          className={cn(
                            "w-full justify-start text-left font-normal",
                            !field.value && "text-muted-foreground"
                          )}
                        >
                          {field.value ? (
                            format(field.value, "EEEE, d MMM yyyy")
                          ) : (
                            <span>Pick a date</span>
                          )}
                          <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                        </Button>
                      </FormControl>
                    </PopoverTrigger>
                    <PopoverContent className="w-auto p-0" align="center">
                      <Calendar
                        mode="single"
                        selected={field.value}
                        onSelect={(date) => {
                          field.onChange(date);
                          setSelectedDate(date);
                          yourCustomDateHandler(date);
                        }}
                        disabled={(date) =>
                          date > new Date() || date < new Date("1900-01-01")
                        }
                        initialFocus
                      />
                    </PopoverContent>
                  </Popover>
                  <FormMessage />
                </FormItem>
              )}
            />
          </div>
        <Button type="submit">Submit</Button>
      </form>
    </Form>
  );

说明：field.onChange是react-hook-form提供的表单字段同步方法，需优先调用它保证表单状态的正确性，之后再执行自定义逻辑。

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