Need help with reading the Calender selected value into form data

[been-there-done-that]

Hello Svelte community!

I'm relatively new to Svelte and exploring the design patterns used in the Shadcn-Svelte library. First and foremost, I'd like to express my gratitude to the Shadcn-Svelte team for creating such an excellent component library – great work!

I'm currently working on a form that incorporates a Shadcn-Svelte calendar and a custom star counter. I'm facing challenges in reading the selected value from the calendar into the form data. Additionally, I'm interested in adding a custom star counter to the form and reading its value into the form data.

`rating-form.svelte`
<script lang="ts">
	import { Calendar as CalendarIcon } from 'radix-icons-svelte';
	import {
		type DateValue,
		DateFormatter,
		getLocalTimeZone,
		parseDate,
		CalendarDate,
		today
	} from '@internationalized/date';
	import { cn } from '$lib/utils';
	import { buttonVariants } from '$lib/components/ui/button';
	import { Calendar } from '$lib/components/ui/calendar';
	import * as Popover from '$lib/components/ui/popover';
	import * as Form from '$lib/components/ui/form';
	import { formSchema, type FormSchema } from './schema';
	import type { SuperValidated } from 'sveltekit-superforms';
	export let form: SuperValidated<FormSchema>;
	import StarRating from '@ernane/svelte-star-rating';

	let displayNumber = '0.00';
	const df = new DateFormatter('en-US', {
		dateStyle: 'long'
	});

	let value: DateValue | undefined = form.data?.dob ? parseDate(form.data?.dob) : undefined;

	let placeholder: DateValue = today(getLocalTimeZone());

	const configs = {
		readOnly: false,
		countStars: 5,
		range: {
			min: 0,
			max: 5,
			step: 0.1
		},
		score: 0.0,
		showScore: true,
		scoreFormat: function () {
			displayNumber = this.score.toFixed(1);
			console.log({ x: Math.ceil(this.score).toString().split('.')[0] });
			starDescription = starDescriptionConfig[Math.ceil(this.score).toString().split('.')[0]];
			return '';
		},
		name: '',
		starConfig: {
			size: 30,
			fillColor: '#F9ED4F',
			strokeColor: '#BB8511',
			unfilledColor: '#FFF',
			strokeUnfilledColor: '#000'
		}
	};

	const starDescriptionConfig: Record<string, string> = {
		'0': "Welcome! We'd love to hear your thoughts. Share your experience and help us grow!",
		'1': 'Share your detailed feedback on what went wrong. Your insights help us understand and improve.',
		'2': 'Let us know where we fell short. Your feedback is valuable in guiding our enhancements.',
		'3': 'Share the positives and negatives. What aspects left an impression, and where can we make it even better?',
		'4': "We're glad you had a positive experience! Any specific suggestions on how we can elevate it further?",
		'5': 'Wow, thank you for the high rating! Tell us what you loved most about your experience.'
	};
	let starDescription = starDescriptionConfig['initial'];
</script>

<div class="flex justify-center">
	<div class="mb-3 text-5xl">
		{displayNumber.replace(/\.?0+$/, '')}
		<span class="-ml-2 text-lg">/{configs.countStars}</span>
	</div>
</div>
<StarRating {configs} />

<Form.Root method="POST" {form} schema={formSchema} let:config class="flex flex-col gap-4">
	<Form.Field {config} name="title">
		<Form.Item>
			<Form.Label class="text-black">Give your review a title</Form.Label>
			<Form.Input
				placeholder="What's important for people to know about this review ?"
				class="border border-black"
			/>
			<Form.Description></Form.Description>
			<Form.Validation />
		</Form.Item>
	</Form.Field>
	<!-- <div class="my-5"></div> -->
	<Form.Field {config} name="review">
		<Form.Item>
			<div>
				<Form.Label class="text-black">Tell us more about your experience</Form.Label>
			</div>
			<Form.Textarea
				placeholder={starDescription}
				class="h-24 resize-y border border-black bg-white"
			/>
			<Form.Description></Form.Description>
			<Form.Validation />
		</Form.Item>
	</Form.Field>
	<Form.Field {config} name="dob">
		<Form.Item class="flex flex-col">
			<Form.Label for="dob">Date of birth</Form.Label>
			<Popover.Root>
				<Form.Control id="dob" let:attrs>
					<Popover.Trigger
						id="dob"
						{...attrs}
						class={cn(
							buttonVariants({ variant: 'outline' }),
							'w-[240px] justify-start pl-3 text-left font-normal',
							!value && 'text-muted-foreground'
						)}
					>
						{value ? df.format(value.toDate(getLocalTimeZone())) : 'Pick a date'}
						<CalendarIcon class="ml-auto h-4 w-4 opacity-50" />
					</Popover.Trigger>
				</Form.Control>
				<Popover.Content class="w-auto p-0" side="top">
					<Calendar
						bind:value
						bind:placeholder
						minValue={new CalendarDate(1900, 1, 1)}
						maxValue={today(getLocalTimeZone())}
						calendarLabel="Date of birth"
						initialFocus
						onValueChange={(v) => {
							if (v) {
								form.data.dob = v.toString();
							} else {
								form.data.dob = '';
							}
						}}
					/>
				</Popover.Content>
			</Popover.Root>
			<Form.Description>Your date of birth is used to calculator your age</Form.Description>
			<Form.Validation />
		</Form.Item>
	</Form.Field>
	<div class="mt-4 flex justify-center">
		<Form.Button>Submit</Form.Button>
	</div>
</Form.Root>

my schema.ts file

import { z } from "zod";
export const formSchema = z.object({
  title: z.string().min(10, "Tiny title trouble! Need 10+ characters to jazz"),
    review:  z.string().min(10, "Tiny trouble in review Field! Need 10+ characters to Save"),
    dob: z
    .string()
});

export type FormSchema = typeof formSchema;