Added step for dateProxy

Author: ciscoheat

CHANGELOG.md

@@ -9,10 +9,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- `dateProxy` now has a `step` option, to support seconds (when [not divisible by 60](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#using_the_step_attribute)).
 - [SuperDebug](https://superforms.rocks/super-debug) now opts out of runes mode as default.
 
 ### Fixed
 
+- Fixed `dateProxy` for `time` formats, previously it returned an invalid date. If you only care about the time part in the date, use `time-utc` as format to avoid timezone changes.
 - Vite 6 bundling fixed by introducing a `default` field into exports in package.json.
 
 ### Changed

src/lib/client/proxies.ts

@@ -50,11 +50,13 @@ type DefaultOptions = {
 	empty?: 'null' | 'undefined' | 'zero';
 	initiallyEmptyIfZero?: boolean;
 	taint?: TaintOption;
+	step: number;
 };
 
 const defaultOptions = {
 	trueStringValue: 'true',
-	dateFormat: 'iso'
+	dateFormat: 'iso',
+	step: 60
 } satisfies DefaultOptions;
 
 ///// Proxy functions ///////////////////////////////////////////////
@@ -99,12 +101,14 @@ export function dateProxy<T extends Record<string, unknown>, Path extends FormPa
 		format?: DefaultOptions['dateFormat'];
 		empty?: Exclude<DefaultOptions['empty'], 'zero'>;
 		taint?: TaintOption;
+		step?: number;
 	}
 ) {
 	return _stringProxy(form, path, 'date', {
 		...defaultOptions,
 		dateFormat: options?.format ?? 'iso',
-		empty: options?.empty
+		empty: options?.empty,
+		step: options?.step ?? 60
 	}) as CorrectProxyType<Date, string, T, Path>;
 }
 
@@ -289,7 +293,13 @@ function _stringProxy<T extends Record<string, unknown>, Path extends FormPaths<
 
 		if (type == 'string') return stringValue;
 		else if (type == 'boolean') return !!stringValue;
-		else if (type == 'date') return new Date(stringValue);
+		else if (type == 'date') {
+			if (stringValue.indexOf('-') === -1) {
+				const utc = options.dateFormat.indexOf('utc') >= 0;
+				const date = utc ? UTCDate(new Date()) : localDate(new Date());
+				return new Date(date + 'T' + stringValue + (utc ? 'Z' : ''));
+			} else return new Date(stringValue);
+		}
 
 		const numberToConvert = options.delimiter
 			? stringValue.replace(options.delimiter, '.')
@@ -349,21 +359,21 @@ function _stringProxy<T extends Record<string, unknown>, Path extends FormPaths<
 				case 'date':
 					return date.toISOString().slice(0, 10);
 				case 'datetime':
-					return date.toISOString().slice(0, 16);
+					return date.toISOString().slice(0, options.step % 60 ? 19 : 16);
 				case 'time':
-					return date.toISOString().slice(11, 16);
+					return date.toISOString().slice(11, options.step % 60 ? 19 : 16);
 				case 'date-utc':
 					return UTCDate(date);
 				case 'datetime-utc':
-					return UTCDate(date) + 'T' + UTCTime(date);
+					return UTCDate(date) + 'T' + UTCTime(date, options.step);
 				case 'time-utc':
-					return UTCTime(date);
+					return UTCTime(date, options.step);
 				case 'date-local':
 					return localDate(date);
 				case 'datetime-local':
-					return localDate(date) + 'T' + localTime(date);
+					return localDate(date) + 'T' + localTime(date, options.step);
 				case 'time-local':
-					return localTime(date);
+					return localTime(date, options.step);
 			}
 		} else {
 			// boolean
@@ -655,9 +665,12 @@ function localDate(date: Date) {
 	);
 }
 
-function localTime(date: Date) {
+function localTime(date: Date, step: number) {
 	return (
-		String(date.getHours()).padStart(2, '0') + ':' + String(date.getMinutes()).padStart(2, '0')
+		String(date.getHours()).padStart(2, '0') +
+		':' +
+		String(date.getMinutes()).padStart(2, '0') +
+		(step % 60 ? ':' + String(date.getSeconds()).padStart(2, '0') : '')
 	);
 }
 
@@ -671,11 +684,12 @@ function UTCDate(date: Date) {
 	);
 }
 
-function UTCTime(date: Date) {
+function UTCTime(date: Date, step: number) {
 	return (
 		String(date.getUTCHours()).padStart(2, '0') +
 		':' +
-		String(date.getUTCMinutes()).padStart(2, '0')
+		String(date.getUTCMinutes()).padStart(2, '0') +
+		(step % 60 ? ':' + String(date.getUTCSeconds()).padStart(2, '0') : '')
 	);
 }
 

src/routes/(v2)/v2/Navigation.svelte

@@ -76,7 +76,8 @@
 		'transport',
 		'bigint',
 		'issue-455',
-		'vine'
+		'vine',
+		'timeproxy'
 	].sort();
 </script>
 

src/routes/(v2)/v2/timeproxy/+page.server.ts

@@ -0,0 +1,23 @@
+import { zod } from '$lib/adapters/zod.js';
+import { message, superValidate } from '$lib/server/index.js';
+import { schema } from './schema.js';
+import { fail } from '@sveltejs/kit';
+
+export const load = async () => {
+	const form = await superValidate(zod(schema));
+	return { form };
+};
+
+export const actions = {
+	default: async ({ request }) => {
+		const formData = await request.formData();
+		console.log(formData);
+
+		const form = await superValidate(formData, zod(schema));
+		console.log(form);
+
+		if (!form.valid) return fail(400, { form });
+
+		return message(form, 'Posted OK!');
+	}
+};

src/routes/(v2)/v2/timeproxy/+page.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { dateProxy, superForm } from '$lib/client/index.js';
+	import SuperDebug from '$lib/client/SuperDebug.svelte';
+	//import { zod } from '$lib/adapters/zod.js'
+	//import { schema } from './schema.js';
+
+	export let data;
+
+	const { form, errors, tainted, message, enhance } = superForm(data.form, {
+		taintedMessage: false
+		//dataType: 'json',
+		//validators: zod(schema)
+	});
+	const time = dateProxy(form, 'time', { format: 'time-utc', step: 1 });
+	const datetime = dateProxy(form, 'datetime', { format: 'datetime-local', step: 1 });
+</script>
+
+<SuperDebug data={{ $form, $errors, $tainted }} />
+
+{#if $message}<h4>{$message}</h4>{/if}
+
+<form method="POST" use:enhance>
+	<label>
+		Time: <input
+			name="time"
+			type="time"
+			step="1"
+			bind:value={$time}
+			aria-invalid={$errors.time ? 'true' : undefined}
+		/>
+		Date and time:
+		<input
+			name="datetime"
+			type="datetime-local"
+			step="1"
+			bind:value={$datetime}
+			aria-invalid={$errors.time ? 'true' : undefined}
+		/>
+		{#if $errors.time}<span class="invalid">{$errors.time}</span>{/if}
+	</label>
+	<div>
+		<button>Submit</button>
+	</div>
+</form>
+
+<style lang="scss">
+	form {
+		margin: 2rem 0;
+
+		input {
+			background-color: #dedede;
+		}
+
+		.invalid {
+			color: crimson;
+		}
+	}
+</style>

src/routes/(v2)/v2/timeproxy/schema.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod';
+
+export const schema = z.object({
+	time: z.date(),
+	datetime: z.date()
+});