Conversation
- Date Picker: single date and date range selection - Time Picker: hours/minutes with optional seconds - Date + Time Picker: combined datetime-local input Accessible, native HTML5 inputs; consistent with existing form components (label, hint, validation, tooltip, icon support). Co-authored-by: Cursor <cursoragent@cursor.com>
|
@RealZone22 , |
|
It looks good so far. As I am currently not home, I will take a look at it on Tuesday when I am back. |
| <input | ||
| type="date" | ||
| id="{{ $uuid }}-start" | ||
| aria-label="{{ $label ? $label.' (start)' : 'Start date' }}" | ||
| @if($nameBase) name="{{ $nameBase }}_start" @endif | ||
| @if($min) min="{{ $min }}" @endif | ||
| @if($max) max="{{ $max }}" @endif | ||
| @if($placeholder) placeholder="{{ $placeholder }}" @endif | ||
| {{ $baseAttrs->twMerge($inputClass) }} | ||
| /> | ||
| <span class="text-on-surface/60 dark:text-on-surface-dark/60 text-sm shrink-0" aria-hidden="true">–</span> | ||
| <input | ||
| type="date" | ||
| id="{{ $uuid }}-end" | ||
| aria-label="{{ $label ? $label.' (end)' : 'End date' }}" | ||
| @if($nameBase) name="{{ $nameBase }}_end" @endif | ||
| @if($min) min="{{ $min }}" @endif | ||
| @if($max) max="{{ $max }}" @endif | ||
| {{ $baseAttrs->twMerge($inputClass) }} | ||
| /> |
There was a problem hiding this comment.
Can you tell me, why didn't you add support for wire:model? Maybe add two variables for start and end which will be used in wire:model
| ]) | ||
|
|
||
| @php | ||
| $uuid = $uuid ?: 'dp-'.bin2hex(random_bytes(6)); |
There was a problem hiding this comment.
I looked at other components, and as far as I know, there was a problem with using PHP variables for UUIDs. Take a look at the input component, for example. There, the UUID is generated with x-data.
| ]) | ||
|
|
||
| @php | ||
| $uuid = $uuid ?: 'dtp-'.bin2hex(random_bytes(6)); |
There was a problem hiding this comment.
Same here. Use the x-data for uuid generation
| ]) | ||
|
|
||
| @php | ||
| $uuid = $uuid ?: 'tp-'.bin2hex(random_bytes(6)); |
There was a problem hiding this comment.
Same here. Use the x-data for uuid generation
| <i class="{{ $icon }} absolute left-2.5 top-1/2 -translate-y-1/2 z-10 text-gray-500 dark:text-neutral-500 pointer-events-none"></i> | ||
| @endif | ||
|
|
||
| <div class="{{ $isRange ? 'flex flex-wrap items-center gap-2' : '' }} @if($icon) relative @endif"> |
There was a problem hiding this comment.
The flex-wrap let the two inputs appear under each other:
|
sorry for the delay today. I'll update you with above changes. |
2 participants
Closes #24
Adds reusable Date/Time Picker components as requested:
Date Picker (
x-pengublade::date-picker)mode="range")Time Picker (
x-pengublade::time-picker):seconds="true")Date + Time Picker (
x-pengublade::date-time-picker)Uses native HTML5 inputs for accessibility; follows existing component patterns (label, hint, validation, tooltip, icon).