custom_ui/frontend/src/components/pages/TestDateForm.vue

<template>
	<div class="test-date-form">
		<h2>Enhanced Date Picker Test</h2>
		<p>This page demonstrates the enhanced date picker functionality in the Form component.</p>

		<Form
			:fields="dateFields"
			:form-data="formData"
			@submit="handleSubmit"
			@change="handleFieldChange"
			submit-button-text="Save Dates"
		/>

		<div v-if="Object.keys(formData).length" class="results mt-6">
			<h3>Current Form Values:</h3>
			<div class="results-grid">
				<div v-for="(value, key) in formData" :key="key" class="result-item">
					<strong>{{ formatFieldLabel(key) }}:</strong>
					<span v-if="value instanceof Date" class="date-value">
						{{ formatDateValue(key, value) }}
					</span>
					<span v-else-if="value" class="value">{{ value }}</span>
					<span v-else class="empty">Not set</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref } from "vue";
import Form from "../common/Form.vue";

const formData = ref({});

const dateFields = [
	// Basic date picker with US format
	{
		name: "birthDate",
		label: "Birth Date",
		type: "date",
		format: "mm/dd/yyyy",
		required: true,
		maxDate: "today",
		yearNavigator: true,
		yearRange: "1920:2010",
		cols: 12,
		md: 6,
		helpText: "Your date of birth",
	},

	// Date with default to today
	{
		name: "startDate",
		label: "Project Start Date",
		type: "date",
		format: "YYYY-MM-DD",
		defaultToToday: true,
		minDate: "today",
		cols: 12,
		md: 6,
		helpText: "When should this project start?",
	},

	// Date and time picker
	{
		name: "appointmentDateTime",
		label: "Appointment Date & Time",
		type: "date",
		showTime: true,
		hourFormat: "12",
		stepMinute: 15,
		defaultToNow: true,
		minDate: "today",
		cols: 12,
		md: 6,
		helpText: "Select appointment date and time",
	},

	// Time-only picker
	{
		name: "preferredTime",
		label: "Preferred Contact Time",
		type: "date",
		timeOnly: true,
		hourFormat: "12",
		stepMinute: 30,
		defaultValue: "09:00",
		cols: 12,
		md: 6,
		helpText: "Best time to contact you",
	},

	// European date format with week numbers
	{
		name: "eventDate",
		label: "Event Date",
		type: "date",
		format: "dd/mm/yyyy",
		showWeek: true,
		monthNavigator: true,
		yearNavigator: true,
		yearRange: "2024:2026",
		cols: 12,
		md: 6,
	},

	// Date with seconds
	{
		name: "preciseTime",
		label: "Precise Timestamp",
		type: "date",
		showTime: true,
		showSeconds: true,
		hourFormat: "24",
		stepSecond: 1,
		cols: 12,
		md: 6,
		helpText: "Precise time with seconds",
	},
];

const handleSubmit = (data) => {
	console.log("Date form submitted:", data);
	alert("Form submitted! Check console for details.");
};

const handleFieldChange = (event) => {
	console.log("Field changed:", event.fieldName, "->", event.value);
};

const formatFieldLabel = (fieldName) => {
	const field = dateFields.find((f) => f.name === fieldName);
	return field ? field.label : fieldName;
};

const formatDateValue = (fieldName, dateValue) => {
	if (!dateValue) return "Not set";

	const field = dateFields.find((f) => f.name === fieldName);

	if (field?.timeOnly) {
		return dateValue.toLocaleTimeString();
	} else if (field?.showTime) {
		return dateValue.toLocaleString();
	} else {
		return dateValue.toLocaleDateString();
	}
};
</script>

<style scoped>
.test-date-form {
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem;
}

.results {
	background: #f8f9fa;
	border-radius: 8px;
	padding: 1.5rem;
	border: 1px solid #e9ecef;
}

.results-grid {
	display: grid;
	gap: 1rem;
	margin-top: 1rem;
}

.result-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem;
	background: white;
	border-radius: 4px;
	border: 1px solid #dee2e6;
}

.date-value {
	color: #0066cc;
	font-weight: 500;
}

.value {
	color: #28a745;
	font-weight: 500;
}

.empty {
	color: #6c757d;
	font-style: italic;
}

@media (max-width: 768px) {
	.result-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}
}
</style>