packages/example/src/routes/form.tsx

@@ -4,6 +4,7 @@ import { Console, Effect, Option, ParseResult, Schema } from "effect"
 import { Component, Form, Hooks } from "effect-fc"
 import { TextFieldFormInput } from "@/lib/form/TextFieldFormInput"
 import { TextFieldFormOptionalInput } from "@/lib/form/TextFieldFormOptionalInput"
+import { DateTimeUtcFromZonedInput } from "@/lib/schema"
 import { runtime } from "@/runtime"
 
 
@@ -20,7 +21,7 @@ const email = Schema.pattern<typeof Schema.String>(
 const RegisterFormSchema = Schema.Struct({
     email: Schema.String.pipe(email),
     password: Schema.String.pipe(Schema.minLength(3)),
-    iq: Schema.OptionFromSelf(Schema.NumberFromString),
+    birth: Schema.OptionFromSelf(DateTimeUtcFromZonedInput),
 })
 
 class RegisterForm extends Effect.Service<RegisterForm>()("RegisterForm", {
@@ -38,7 +39,7 @@ class RegisterForm extends Effect.Service<RegisterForm>()("RegisterForm", {
             ),
         ),
 
-        initialEncodedValue: { email: "", password: "", iq: Option.none() },
+        initialEncodedValue: { email: "", password: "", birth: Option.none() },
         submit: v => Effect.sleep("500 millis").pipe(
             Effect.andThen(Console.log(v)),
             Effect.andThen(Effect.sync(() => alert("Done!"))),
@@ -72,8 +73,9 @@ class RegisterPage extends Component.makeUntraced("RegisterPage")(function*() {
                     />
 
                     <TextFieldFormOptionalInputFC
-                        field={Form.useField(form, ["iq"])}
-                        defaultValue="100"
+                        type="datetime-local"
+                        field={Form.useField(form, ["birth"])}
+                        defaultValue=""
                     />
 
                     <Button disabled={!canSubmit}>Submit</Button>