micosil
/
desker
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

Refactor date picker components for improved accessibility and usability 

- Add `showPicker` event to trigger native date picker overlays.
- Adjust z-index and positioning for hidden `input` elements to improve interaction.
- Reorganize markup for consistent focus and selection behavior across components.
main
Pau Costa Ferrer 2026-03-28 18:17:30 +01:00
parent 6e48763947
commit 9ac64de030
4 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
apps/web/src/lib/components/BookingModal.svelte
View File

@ -254,16 +254,17 @@
{$t('booking.bookingDate')}
</label>
<div class="relative">
<div class="w-full p-3 bg-gray-50 border border-gray-200 rounded-xl font-medium text-gray-700 flex justify-between items-center shadow-sm">
<span>{format(new Date(bookingDate + 'T00:00:00'), dateFormat, { locale: dateLocale })}</span>
<Calendar size={18} class="text-indigo-600" />
</div>
<input
type="date"
bind:value={bookingDate}
min={new Date().toISOString().split('T')[0]}
class="absolute inset-0 opacity-0 cursor-pointer w-full"
class="absolute inset-0 opacity-0 cursor-pointer w-full z-10"
on:click={(e) => e.currentTarget.showPicker()}
/>
<div class="w-full p-3 bg-gray-50 border border-gray-200 rounded-xl font-medium text-gray-700 flex justify-between items-center shadow-sm">
<span>{format(new Date(bookingDate + 'T00:00:00'), dateFormat, { locale: dateLocale })}</span>
<Calendar size={18} class="text-indigo-600" />
</div>
</div>
</div>

11
apps/web/src/routes/dashboard/building/[id]/+page.svelte
View File

@ -104,16 +104,17 @@
<div class="flex items-center gap-3 w-full lg:w-auto">
<div class="relative flex-1 lg:flex-none min-w-[200px]">
<span class="absolute -top-2 left-3 px-1 bg-gray-50 text-[10px] font-bold text-indigo-600 uppercase tracking-wider">{$t('building.selectDate')}</span>
<div class="w-full pl-3 pr-4 py-3 bg-white border border-gray-300 rounded-xl font-medium text-gray-700 shadow-sm flex items-center justify-between">
<span class="capitalize">{format(selectedDate, dateFormat, { locale: dateLocale })}</span>
<Calendar size={18} class="text-indigo-600" />
</div>
<input
id="date-select"
type="date"
bind:value={selectedDateString}
class="absolute inset-0 opacity-0 cursor-pointer"
class="absolute inset-0 opacity-0 cursor-pointer z-10 w-full h-full"
on:click={(e) => e.currentTarget.showPicker()}
/>
<div class="w-full pl-3 pr-4 py-3 bg-white border border-gray-300 rounded-xl font-medium text-gray-700 shadow-sm flex items-center justify-between">
<span class="capitalize">{format(selectedDate, dateFormat, { locale: dateLocale })}</span>
<Calendar size={18} class="text-indigo-600" />
</div>
</div>
<div class="relative flex-1 lg:flex-none min-w-[200px]">

11
apps/web/src/routes/dashboard/floor/[id]/+page.svelte
View File

@ -63,14 +63,19 @@
</div>
<div class="flex items-center gap-3">
<div class="relative min-w-[180px]">
<label for="date-select" class="absolute -top-2 left-3 px-1 bg-white text-[10px] font-bold text-indigo-600 uppercase tracking-wider">Select Date</label>
<div class="relative min-w-[200px]">
<span class="absolute -top-2 left-3 px-1 bg-white text-[10px] font-bold text-indigo-600 uppercase tracking-wider">Select Date</span>
<input
id="date-select"
type="date"
bind:value={selectedDateString}
class="w-full pl-3 pr-4 py-3 bg-white border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent font-medium text-gray-700 shadow-sm"
class="absolute inset-0 opacity-0 cursor-pointer z-10 w-full h-full"
on:click={(e) => e.currentTarget.showPicker()}
/>
<div class="w-full pl-3 pr-4 py-3 bg-white border border-gray-300 rounded-xl font-medium text-gray-700 shadow-sm flex items-center justify-between">
<span>{selectedDate.toLocaleDateString('en-CA', { weekday: 'long', month: 'long', day: 'numeric' })}</span>
<Calendar size={18} class="text-indigo-600" />
</div>
</div>
</div>
</div>

11
apps/web/src/routes/dashboard/my-bookings/+page.svelte
View File

@ -265,15 +265,16 @@
<div class="col-span-2">
<label class="block text-sm font-medium text-gray-700 mb-1">{$t('booking.date')}</label>
<div class="relative">
<input
type="date"
bind:value={editStartTimeDate}
class="absolute inset-0 opacity-0 cursor-pointer w-full z-10"
on:click={(e) => e.currentTarget.showPicker()}
/>
<div class="w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-lg text-gray-700 flex justify-between items-center">
<span>{format(new Date(editStartTimeDate + 'T00:00:00'), dateFormat, { locale: dateLocale })}</span>
<Calendar size={16} class="text-gray-400" />
</div>
<input
type="date"
bind:value={editStartTimeDate}
class="absolute inset-0 opacity-0 cursor-pointer w-full"
/>
</div>
</div>