Files
investbrain/resources/views/components/ui/datetime.blade.php
T
2026-03-16 20:18:08 -05:00

83 lines
2.4 KiB
PHP

@props([
'id' => null,
'label' => null,
'icon' => null,
'hint' => null,
'hintClass' => 'label-text-alt text-gray-400 py-1 pb-0',
'errorField' => null,
'errorClass' => 'text-red-500 label-text-alt p-1',
'omitError' => false,
'firstErrorOnly' => false,
])
@php
$modelName = $attributes->whereStartsWith('wire:model')->first();
$errorFieldName = $errorField ?? $modelName;
$id = $id == $modelName ? $modelName : "{$id}{$modelName}";
@endphp
<style>
input[type="date"]::-webkit-calendar-picker-indicator {
color: transparent;
background: transparent;
display: none;
}
</style>
<div x-data>
{{-- STANDARD LABEL --}}
@if($label)
<label for="{{ $id }}" class="pt-0 label label-text font-semibold">
<span>
{{ $label }}
@if($attributes->get('required'))
<span class="text-error">*</span>
@endif
</span>
</label>
@endif
<div class="flex-1 relative">
<input
type="date"
placeholder="Select date"
id="{{ $id }}"
x-ref="dateInput"
onfocus="this.showPicker?.()"
{{ $attributes->class([
"block input input-primary w-full peer appearance-none",
'ps-10' => ($icon),
'border border-dashed' => $attributes->has('readonly') && $attributes->get('readonly') == true,
'input-error' => $errors->has($errorFieldName)
]) }}
/>
{{-- ICON --}}
<div @click="$refs.dateInput.showPicker?.()"
class="z-60 absolute top-1/2 -translate-y-1/2 end-0 p-3 cursor-pointer text-neutral-400 hover:text-neutral-500"
>
<x-ui.icon name="o-calendar" />
</div>
</div>
{{-- ERROR --}}
@if(!$omitError && $errors->has($errorFieldName))
@foreach($errors->get($errorFieldName) as $message)
@foreach(Arr::wrap($message) as $line)
<div class="{{ $errorClass }}" x-classes="text-red-500 label-text-alt p-1">{{ $line }}</div>
@break($firstErrorOnly)
@endforeach
@break($firstErrorOnly)
@endforeach
@endif
{{-- HINT --}}
@if($hint)
<div class="{{ $hintClass }}" x-classes="label-text-alt text-gray-400 py-1 pb-0">{{ $hint }}</div>
@endif
</div>