wehub-resource-sync
91e75e620b
CI: cua-driver distro-compat matrix / debian:12 (glibc 2.36) (push) Has been cancelled
CI: SPDX Headers / Check SPDX headers (warn-only) (push) Has been cancelled
CD: Docs MCP Server / build (linux/amd64) (push) Has been cancelled
CD: Docs MCP Server / build (linux/arm64) (push) Has been cancelled
CD: Docs MCP Server / merge (push) Has been cancelled
CI: cua-driver distro-compat matrix / Resolve release version (push) Has been cancelled
CI: cua-driver distro-compat matrix / fedora:41 (glibc 2.40) (push) Has been cancelled
CI: cua-driver distro-compat matrix / rockylinux:9 (glibc 2.34) (push) Has been cancelled
CI: cua-driver distro-compat matrix / ubuntu:22.04 (glibc 2.35) (push) Has been cancelled
CI: cua-driver distro-compat matrix / ubuntu:24.04 (glibc 2.39) (push) Has been cancelled
CI: cua-driver distro-compat matrix / Distro compat summary (push) Has been cancelled
CI: Rust Linux unit / Rust Linux unit and compile (push) Has been cancelled
CI: Rust Windows unit / Rust Windows unit and compile (push) Has been cancelled
CI: Nix Linux Rust source / Nix / compositor build (push) Has been cancelled
CI: Nix Linux Rust source / Nix / driver package (push) Has been cancelled
CI: Nix Linux Rust source / Nix / Rust unit tests (push) Has been cancelled
77 lines
2.7 KiB
HTML
77 lines
2.7 KiB
HTML
<main class="flex flex-col h-full w-full p-6" role="main" aria-label="Date picker interface">
|
|
<div class="max-w-md mx-auto w-full">
|
|
<h1 class="text-xl font-semibold text-gray-900 mb-6">Select a date</h1>
|
|
|
|
<div class="flex flex-col gap-2 mb-6">
|
|
<label for="date-input" class="text-sm font-medium text-gray-700"> Choose Date: </label>
|
|
<input
|
|
type="date"
|
|
id="date-input"
|
|
class="px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900"
|
|
aria-label="Date selection input"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Selected Date Display -->
|
|
<div class="p-4 border-2 border-gray-300 rounded-lg bg-gray-50">
|
|
<p class="text-sm font-medium text-gray-700 mb-2">Selected Date:</p>
|
|
<div class="flex items-center gap-2">
|
|
<iconify-icon
|
|
icon="mdi:calendar"
|
|
class="text-blue-600"
|
|
style="font-size: 1.5rem"
|
|
></iconify-icon>
|
|
<span id="selected-date-display" class="text-lg font-semibold text-gray-900"
|
|
>Not selected</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded">
|
|
<p class="text-sm text-blue-800">
|
|
<iconify-icon icon="mdi:information" class="text-blue-600"></iconify-icon>
|
|
Click the date input to select a date
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Store selected date globally for evaluation
|
|
window.__selectedDate = null;
|
|
|
|
const dateInput = document.getElementById('date-input');
|
|
const dateDisplay = document.getElementById('selected-date-display');
|
|
|
|
// Update the display and global value when date changes
|
|
dateInput.addEventListener('change', function () {
|
|
const selectedDate = this.value;
|
|
window.__selectedDate = selectedDate || null;
|
|
|
|
// Update display
|
|
if (selectedDate) {
|
|
// Format date for display (e.g., "January 15, 2024")
|
|
const date = new Date(selectedDate + 'T00:00:00');
|
|
const options = { year: 'numeric', month: 'long', day: 'numeric' };
|
|
dateDisplay.textContent = date.toLocaleDateString('en-US', options);
|
|
} else {
|
|
dateDisplay.textContent = 'Not selected';
|
|
}
|
|
});
|
|
|
|
// Also capture on input event
|
|
dateInput.addEventListener('input', function () {
|
|
const selectedDate = this.value;
|
|
window.__selectedDate = selectedDate || null;
|
|
|
|
// Update display
|
|
if (selectedDate) {
|
|
const date = new Date(selectedDate + 'T00:00:00');
|
|
const options = { year: 'numeric', month: 'long', day: 'numeric' };
|
|
dateDisplay.textContent = date.toLocaleDateString('en-US', options);
|
|
} else {
|
|
dateDisplay.textContent = 'Not selected';
|
|
}
|
|
});
|
|
</script>
|
|
</main>
|