change date and time inputs, add date time input

Author: mProjectsCode

exampleVault/Input Fields/Date and Time.md

@@ -1,7 +1,8 @@
 ---
-time: 21:03
-date2: 2024-03-05
-date1: 2023-01-01
+time: 13:05
+date2: 2024-01-22
+date1: 2024-03-07
+dateTime: 2024-03-13T15:07
 ---
 
 ### Date
@@ -23,3 +24,9 @@ INPUT[datePicker(showcase, defaultValue(null)):date3]
 ```meta-bind
 INPUT[time(showcase):time]
 ```
+
+
+### Date Time
+```meta-bind
+INPUT[dateTime(showcase):dateTime]
+```

packages/core/src/Settings.ts

@@ -63,7 +63,6 @@ export interface MetaBindPluginSettings {
 	devMode: boolean;
 	ignoreCodeBlockRestrictions: boolean;
 	preferredDateFormat: string;
-	useUsDateInputOrder: boolean;
 	firstWeekday: Weekday;
 	syncInterval: number;
 	maxSyncInterval: number;
@@ -90,7 +89,6 @@ export const DEFAULT_SETTINGS: MetaBindPluginSettings = {
 	devMode: false,
 	ignoreCodeBlockRestrictions: false,
 	preferredDateFormat: 'YYYY-MM-DD',
-	useUsDateInputOrder: false,
 	firstWeekday: weekdays[1],
 	syncInterval: 200,
 	minSyncInterval: 50,

packages/core/src/config/FieldConfigs.ts

@@ -44,6 +44,7 @@ export enum InputFieldType {
 	INLINE_LIST_SUGGESTER = 'inlineListSuggester',
 	INLINE_LIST = 'inlineList',
 	IMAGE_LIST_SUGGESTER = 'imageListSuggester',
+	DATE_TIME = 'dateTime',
 
 	INVALID = 'invalid',
 }
@@ -177,6 +178,11 @@ export const InputFieldConfigs: Record<InputFieldType, InputFieldConfig> = {
 		allowInBlock: true,
 		allowInline: false,
 	},
+	[InputFieldType.DATE_TIME]: {
+		type: InputFieldType.DATE_TIME,
+		allowInBlock: true,
+		allowInline: true,
+	},
 	[InputFieldType.INVALID]: {
 		type: InputFieldType.INVALID,
 		allowInBlock: false,

packages/core/src/fields/inputFields/InputFieldFactory.ts

@@ -29,6 +29,7 @@ import { DocsUtils } from 'packages/core/src/utils/DocsUtils';
 import { ErrorLevel, MetaBindParsingError } from 'packages/core/src/utils/errors/MetaBindErrors';
 import { expectType } from 'packages/core/src/utils/Utils';
 import { ImageListSuggesterIPF } from 'packages/core/src/fields/inputFields/fields/ImageListSuggester/ImageListSuggesterIPF';
+import { DateTimeIPF } from 'packages/core/src/fields/inputFields/fields/DateTime/DateTimeIPF';
 
 export type InputField =
 	| ToggleIPF
@@ -50,7 +51,8 @@ export type InputField =
 	| TimeIPF
 	| InlineListSuggesterIPF
 	| InlineListIPF
-	| ImageListSuggesterIPF;
+	| ImageListSuggesterIPF
+	| DateTimeIPF;
 
 export class InputFieldFactory {
 	plugin: IPlugin;
@@ -109,6 +111,8 @@ export class InputFieldFactory {
 			return new InlineListIPF(base);
 		} else if (type === InputFieldType.IMAGE_LIST_SUGGESTER) {
 			return new ImageListSuggesterIPF(base);
+		} else if (type === InputFieldType.DATE_TIME) {
+			return new DateTimeIPF(base);
 		}
 
 		expectType<InputFieldType.INVALID>(type);

packages/core/src/fields/inputFields/fields/Date/DateComponent.svelte

@@ -1,131 +1,10 @@
 <script lang="ts">
-	import { Moment } from 'moment';
-	import { onMount } from 'svelte';
-	import { DateParser } from '../../../../parsers/DateParser';
-	import { IPlugin } from '../../../../IPlugin';
+	export let value: string;
+	export let onValueChange: (value: string) => void;
 
-	export let plugin: IPlugin;
-	export let value: Moment;
-	export let useUsInputOrder: boolean;
-	export let onValueChange: (value: Moment) => void;
-
-	let months: Record<string, string> = {};
-	let days: Record<string, string> = {};
-
-	let year: string;
-	let month: string;
-	let day: string;
-
-	onMount(() => {
-		months = {
-			'0': 'January',
-			'1': 'February',
-			'2': 'March',
-			'3': 'April',
-			'4': 'May',
-			'5': 'June',
-			'6': 'July',
-			'7': 'August',
-			'8': 'September',
-			'9': 'October',
-			'10': 'November',
-			'11': 'December',
-		};
-
-		for (let i = 1; i <= 31; i++) {
-			days[i.toString()] = i.toString();
-		}
-
-		year = value.year().toString();
-		month = value.month().toString();
-		day = value.date().toString();
-	});
-
-	export function setValue(v: Moment): void {
+	export function setValue(v: string): void {
 		value = v;
-
-		year = value.year().toString();
-		month = value.month().toString();
-		day = value.date().toString();
-	}
-
-	function onYearChange(): void {
-		const parseRes = Number.parseInt(year);
-		const yearNumber = Number.isNaN(parseRes) ? DateParser.getDefaultYear() : parseRes;
-
-		value.year(yearNumber);
-		// year = yearNumber.toString();
-
-		onValueChange(value);
-	}
-
-	function onMonthChange(): void {
-		value.month(month);
-
-		const clampedDay = clampDay(value.date());
-
-		value.date(clampedDay);
-		day = clampedDay.toString();
-
-		onValueChange(value);
-	}
-
-	function onDayChange(): void {
-		const parseRes = Number.parseInt(day);
-		const clampedDay = clampDay(parseRes);
-
-		value.date(clampedDay);
-		day = clampedDay.toString();
-
-		onValueChange(value);
-	}
-
-	function clampDay(day: number): number {
-		if (Number.isNaN(day)) {
-			return DateParser.getDefaultDay();
-		} else if (day < 1) {
-			return 1;
-		} else if (day > value.daysInMonth()) {
-			return value.daysInMonth();
-		}
-		return day;
 	}
 </script>
 
-<div class="mb-input-element-group">
-	{#if useUsInputOrder}
-		<select class="dropdown mb-input-element-group-element" bind:value={month} on:change={() => onMonthChange()}>
-			{#each Object.entries(months) as [_month, _monthName]}
-				<option value={_month}>{_monthName}</option>
-			{/each}
-		</select>
-
-		<select class="dropdown mb-input-element-group-element" bind:value={day} on:change={() => onDayChange()}>
-			{#each Object.values(days) as _day}
-				<option value={_day}>{_day}</option>
-			{/each}
-		</select>
-	{:else}
-		<select class="dropdown mb-input-element-group-element" bind:value={day} on:change={() => onDayChange()}>
-			{#each Object.values(days) as _day}
-				<option value={_day}>{_day}</option>
-			{/each}
-		</select>
-
-		<select class="dropdown mb-input-element-group-element" bind:value={month} on:change={() => onMonthChange()}>
-			{#each Object.entries(months) as [_month, _monthName]}
-				<option value={_month}>{_monthName}</option>
-			{/each}
-		</select>
-	{/if}
-
-	<input
-		class="mb-date-input-year-input mb-input-element-group-element"
-		type="number"
-		tabindex="0"
-		bind:value={year}
-		on:input={() => onYearChange()}
-		max="9999"
-		min="0"
-	/>
-</div>
+<input type="date" bind:value={value} on:input={() => onValueChange(value)} />

packages/core/src/fields/inputFields/fields/Date/DateIPF.ts

@@ -1,42 +1,28 @@
-import { type Moment } from 'moment';
 import { AbstractInputField } from 'packages/core/src/fields/inputFields/AbstractInputField';
 import DateComponent from 'packages/core/src/fields/inputFields/fields/Date/DateComponent.svelte';
 import { DateParser } from 'packages/core/src/parsers/DateParser';
 import { type SvelteComponent } from 'svelte';
+import { parseUnknownToString } from 'packages/core/src/utils/Literal';
 
-export class DateIPF extends AbstractInputField<string, Moment> {
+export class DateIPF extends AbstractInputField<string, string> {
 	protected filterValue(value: unknown): string | undefined {
-		if (value === null || value === undefined || typeof value !== 'string') {
-			return undefined;
-		}
-		const date = DateParser.parse(value);
-		if (date.isValid()) {
-			return DateParser.stringify(date);
-		} else {
-			return undefined;
-		}
+		return parseUnknownToString(value);
 	}
 
-	protected getFallbackDefaultValue(): Moment {
-		return DateParser.getDefaultDate();
+	protected getFallbackDefaultValue(): string {
+		return DateParser.stringify(DateParser.getDefaultDate());
 	}
 
 	protected getSvelteComponent(): typeof SvelteComponent {
 		// @ts-ignore
 		return DateComponent;
 	}
 
-	protected rawMapValue(value: Moment): string {
-		return DateParser.stringify(value);
+	protected rawMapValue(value: string): string {
+		return value;
 	}
 
-	protected rawReverseMapValue(value: string): Moment | undefined {
-		return DateParser.parse(value);
-	}
-
-	protected getMountArgs(): Record<string, unknown> {
-		return {
-			useUsInputOrder: this.base.plugin.settings.useUsDateInputOrder,
-		};
+	protected rawReverseMapValue(value: string): string | undefined {
+		return value;
 	}
 }

packages/core/src/fields/inputFields/fields/DateTime/DateTimeComponent.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	export let value: string;
+	export let onValueChange: (value: string) => void;
+
+	export function setValue(v: string): void {
+		value = v;
+	}
+</script>
+
+<input type="datetime-local" bind:value={value} on:input={() => onValueChange(value)} />

packages/core/src/fields/inputFields/fields/DateTime/DateTimeIPF.ts

@@ -0,0 +1,28 @@
+import { AbstractInputField } from 'packages/core/src/fields/inputFields/AbstractInputField';
+import { parseUnknownToString } from 'packages/core/src/utils/Literal';
+import { DateParser } from 'packages/core/src/parsers/DateParser';
+import type { SvelteComponent } from 'svelte';
+import DateTimeComponent from 'packages/core/src/fields/inputFields/fields/DateTime/DateTimeComponent.svelte';
+
+export class DateTimeIPF extends AbstractInputField<string, string> {
+	protected filterValue(value: unknown): string | undefined {
+		return parseUnknownToString(value);
+	}
+
+	protected getFallbackDefaultValue(): string {
+		return DateParser.stringify(DateParser.getDefaultDate());
+	}
+
+	protected getSvelteComponent(): typeof SvelteComponent {
+		// @ts-ignore
+		return DateTimeComponent;
+	}
+
+	protected rawMapValue(value: string): string {
+		return value;
+	}
+
+	protected rawReverseMapValue(value: string): string | undefined {
+		return value;
+	}
+}

packages/core/src/fields/inputFields/fields/Time/TimeComponent.svelte

@@ -1,59 +1,10 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-	import { Time } from '../../../../parsers/TimeParser';
+	export let value: string;
+	export let onValueChange: (value: string) => void;
 
-	export let value: Time;
-	export let onValueChange: (value: Time) => void;
-
-	let hours: Record<string, string> = {};
-	let minutes: Record<string, string> = {};
-
-	let hour: string;
-	let minute: string;
-
-	onMount(() => {
-		for (let i = 0; i <= 24; i++) {
-			hours[i.toString()] = i.toString().padStart(2, '0');
-		}
-
-		for (let i = 0; i <= 59; i++) {
-			minutes[i.toString()] = i.toString().padStart(2, '0');
-		}
-
-		minute = value.getMinute().toString();
-		hour = value.getHour().toString();
-	});
-
-	export function setValue(v: Time): void {
+	export function setValue(v: string): void {
 		value = v;
-
-		minute = value.getMinute().toString();
-		hour = value.getHour().toString();
-	}
-
-	function onMinuteChange(): void {
-		value.setMinuteFromString(minute);
-
-		onValueChange(value);
-	}
-
-	function onHourChange(): void {
-		value.setHourFromString(hour);
-
-		onValueChange(value);
 	}
 </script>
 
-<div class="mb-input-element-group">
-	<select class="dropdown mb-input-element-group-element" bind:value={hour} on:change={() => onHourChange()}>
-		{#each Object.entries(hours) as [_hour, _hourName]}
-			<option value={_hour}>{_hourName}</option>
-		{/each}
-	</select>
-
-	<select class="dropdown mb-input-element-group-element" bind:value={minute} on:change={() => onMinuteChange()}>
-		{#each Object.entries(minutes) as [_minute, _minuteName]}
-			<option value={_minute}>{_minuteName}</option>
-		{/each}
-	</select>
-</div>
+<input type="time" bind:value={value} on:input={() => onValueChange(value)} />