Svelte 5 + Superforms：DatePicker组件提交值异常排查

核心问题：提交时testDate变为'NOTHING'的原因与修复 #

你的问题出在手动添加的hidden input与Superforms的自动表单提交逻辑冲突，导致提交时没有正确传递$form中的值。

修复步骤： #

1. 移除手动添加的hidden input
   Superforms的enhance函数会自动将$form对象中的所有字段提交到服务器，不需要手动添加hidden input。删除表单中的这一行：

   <input type="hidden" name="testDate" value={$form.testDate || 'NOTHING'} />
   

   移除后，Superforms会自动处理$form.testDate的提交，无需额外干预。

2. 确认响应式更新逻辑正常
   你当前的$effect逻辑是正确的：当calendarDate变化时，将其转换为字符串并同步到$form.testDate。可以保留这段代码，但确保calendarDate的双向绑定正常工作（你的DatePicker组件使用$bindable()实现双向绑定是正确的）。

关于表单校验Schema的疑问 #

表单校验Schema必须设置为字符串类型，原因如下：

• HTTP表单提交的数据只能是字符串、数字等基本类型，CalendarDate是客户端的JavaScript对象，无法直接通过表单提交到服务器。
• 你需要在客户端将CalendarDate转换为字符串（如ISO格式），服务端接收字符串后，可直接存储到数据库，或根据需要转换为Date对象处理。

示例Schema定义（testValidation.ts） #

import { z } from 'zod';

export const testSchema = z.object({
  testDate: z.string()
    .min(1, '日期不能为空')
    .regex(/^\d{4}-\d{2}-\d{2}$/, '日期格式必须为YYYY-MM-DD')
});

额外优化建议 #

可以简化客户端的响应式逻辑，直接将$form.testDate与DatePicker绑定，避免额外的calendarDate变量：

<script lang="ts">
  // ... 其他导入
  const { form, errors, enhance, message } = superForm(data.form, {
    validators: 'clear',
  });

  // 双向绑定$form.testDate，自动转换类型
  let calendarDate: CalendarDate = $state(
    $form.testDate ? parseDate($form.testDate) : new CalendarDate(1997, 1, 9)
  );

  $effect(() => {
    $form.testDate = calendarDate.toString();
  });
</script>

<form action="" method="post" use:enhance>
  <DatePicker bind:selectedValue={calendarDate}/>
  <ShinyCta type='submit' btnWidth='100%'>Submit</ShinyCta>
</form>

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