177 lines
8.5 KiB
PHP
177 lines
8.5 KiB
PHP
@props([
|
|
// name of the datepicker. This name is used when posting the form with the datepicker
|
|
'name' => 'bw-timepicker-'.uniqid(),
|
|
'hour_label' => config('bladewind.timepicker.hour_label','HH'),
|
|
'minute_label' => config('bladewind.timepicker.minute_label','MM'),
|
|
'format_label' => config('bladewind.timepicker.format_label','--'),
|
|
'required' => false,
|
|
// what should the time hours be displayed as. Available options are 12, 24
|
|
'format' => config('bladewind.timepicker.format','12'),
|
|
'selected_value' => '',
|
|
'style' => config('bladewind.timepicker.style','popup'),
|
|
'label' => '',
|
|
'placeholder' => config('bladewind.timepicker.placeholder','HH:MM'),
|
|
])
|
|
@php
|
|
$name = preg_replace('/[\s-]/', '_', $name);
|
|
if(!empty($selected_value)) {
|
|
$selected_time_array = explode(':', str_replace(' ', '', $selected_value));
|
|
$selected_hour = $selected_time_array[0];
|
|
$selected_minute = substr($selected_time_array[1], 0, 2);
|
|
$selected_format = (strlen($selected_time_array[1]) > 2) ? strtoupper(substr($selected_time_array[1], 2, 2)) : '';
|
|
}
|
|
@endphp
|
|
@if($style == 'popup')
|
|
<div style="width: 120px" class="inline-flex bw-time-icon-container-{{$name}}">
|
|
<x-bladewind::input
|
|
class="bw-time-{{$name}}"
|
|
:name="$name"
|
|
suffix="clock"
|
|
:required="$required"
|
|
suffix_is_icon="true"
|
|
:selected_value="$selected_value"
|
|
:placeholder="$placeholder"
|
|
:label="$label"/>
|
|
</div>
|
|
<script>
|
|
{{--domEl('.{{$name}}-suffix').addEventListener('click', () => {--}}
|
|
domEl('.bw-time-icon-container-{{$name}}').addEventListener('click', () => {
|
|
showModal('bw-timepicker-modal-{{$name}}');
|
|
domEl('.bw-{{$name}}_hh').focus();
|
|
});
|
|
</script>
|
|
|
|
<x-bladewind::modal
|
|
title="{{ __('bladewind::timepicker.POPUP_TITLE') }}"
|
|
name="bw-timepicker-modal-{{$name}}"
|
|
cancel_button_label=""
|
|
ok_button_label="{{ __('bladewind::timepicker.POPUP_OKAY') }}"
|
|
show_cancel_button="false"
|
|
align_buttons="center">
|
|
<div class="flex justify-center pt-4 pb-3">
|
|
<div>
|
|
<x-bladewind::input numeric="true" max="{{($format=='12' ? 12 : 23)}}"
|
|
:selected_value="$selected_hour??''"
|
|
class="w-[105px] text-center border-2 border-gray-200/70 rounded-md !px-4 !py-5 text-5xl font-semibold opacity-80 bw-{{$name}}_hh"
|
|
placeholder="{{$hour_label}}"
|
|
:enforce_limits="true"
|
|
oninput="setTime_{{$name}}(this.value); moveToMinutes('{{$name}}')"/>
|
|
</div>
|
|
<div class="px-3 text-center pt-2.5">
|
|
<div class="block size-3 bg-gray-500 my-4 rounded-full"></div>
|
|
<div class="block size-3 bg-gray-500 rounded-full"></div>
|
|
</div>
|
|
<div>
|
|
<x-bladewind::input numeric="true" max="59"
|
|
class="w-[105px] text-center border-2 border-gray-200/70 rounded-md !px-2 !py-5 text-5xl font-semibold opacity-80 bw-{{$name}}_mm"
|
|
:selected_value="$selected_minute??''"
|
|
placeholder="{{$minute_label}}"
|
|
:enforce_limits="true"
|
|
oninput="setTime_{{$name}}(this.value); "
|
|
maxlength="2"/>
|
|
</div>
|
|
@if($format == '12')
|
|
<div class="pl-3 space-y-1">
|
|
<div class="rounded-t-lg font-semibold cursor-pointer text-2xl px-4 py-2 {{ (!empty($selected_format) && $selected_format == 'AM') ? 'bg-gray-500 text-white' : 'bg-gray-100 hover:bg-gray-300' }} bw-time-format-am"
|
|
onclick="toggleFormat('AM', '{{$name}}');setTime_{{$name}}('AM')">
|
|
{{ __('bladewind::timepicker.AM') }}
|
|
</div>
|
|
<div class="rounded-b-lg font-semibold cursor-pointer text-2xl px-4 py-2 {{ (!empty($selected_format) && $selected_format == 'PM') ? 'bg-gray-500 text-white' : 'bg-gray-100 hover:bg-gray-300' }} bw-time-format-pm"
|
|
onclick="toggleFormat('PM', '{{$name}}');setTime_{{$name}}('PM')">
|
|
{{ __('bladewind::timepicker.PM') }}
|
|
</div>
|
|
<input type="hidden" class="bw-{{$name}}_format bg-gray-500"/>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</x-bladewind::modal>
|
|
@once
|
|
<script>
|
|
const toggleFormat = (format, field) => {
|
|
let am = domEl('.bw-time-format-am');
|
|
let pm = domEl('.bw-time-format-pm');
|
|
if (format === 'AM') {
|
|
changeCss(am, 'bg-gray-500,text-white', 'add', true);
|
|
changeCss(am, 'bg-gray-100, hover:bg-gray-300', 'remove', true);
|
|
changeCss(pm, 'bg-gray-500,text-white', 'remove', true);
|
|
changeCss(pm, 'bg-gray-100, hover:bg-gray-300', 'add', true);
|
|
}
|
|
if (format === 'PM') {
|
|
changeCss(pm, 'bg-gray-500,text-white', 'add', true);
|
|
changeCss(pm, 'bg-gray-100, hover:bg-gray-300', 'remove', true);
|
|
changeCss(am, 'bg-gray-500,text-white', 'remove', true);
|
|
changeCss(am, 'bg-gray-100, hover:bg-gray-300', 'add', true);
|
|
}
|
|
domEl(`.bw-${field}_format`).value = format;
|
|
}
|
|
const moveToMinutes = (name) => {
|
|
if (domEl(`.bw-${name}_hh`).value.length >= 2) {
|
|
domEl(`.bw-${name}_mm`).focus();
|
|
}
|
|
}
|
|
</script>
|
|
@endonce
|
|
@else
|
|
<div class="flex">
|
|
<div>
|
|
<x-bladewind::select
|
|
data="manual"
|
|
onselect="setTime_{{$name}}"
|
|
:placeholder="$hour_label"
|
|
name="{{$name}}_hh"
|
|
:required="$required"
|
|
selected_value="{{$selected_hour??''}}">
|
|
@for($hours=1; $hours < (($format=='12') ? 13:24); $hours++)
|
|
@php $hours = (($format=='12') ? $hours : str_pad($hours, 2, '0', STR_PAD_LEFT)) @endphp
|
|
<x-bladewind::select-item label="{{$hours}}" value="{{$hours}}"/>
|
|
@endfor
|
|
@if($format !== '12')
|
|
<x-bladewind::select-item label="00" value="00"/>
|
|
@endif
|
|
</x-bladewind::select>
|
|
</div>
|
|
<div class="!-ml-2">
|
|
<x-bladewind::select
|
|
data="manual"
|
|
onselect="setTime_{{$name}}"
|
|
:placeholder="$minute_label"
|
|
name="{{$name}}_mm"
|
|
:required="$required"
|
|
selected_value="{{$selected_minute??''}}">
|
|
<x-bladewind::select-item label="00" value="00"/>
|
|
@for($minutes=1; $minutes < 60; $minutes++)
|
|
@php $minutes = str_pad($minutes, 2, '0', STR_PAD_LEFT) @endphp
|
|
<x-bladewind::select-item label="{{$minutes}}" value="{{$minutes}}"/>
|
|
@endfor
|
|
</x-bladewind::select>
|
|
</div>
|
|
@if($format == '12')
|
|
<div class="!-ml-2">
|
|
<x-bladewind::select
|
|
data="manual"
|
|
onselect="setTime_{{$name}}"
|
|
:placeholder="$format_label"
|
|
name="{{$name}}_format"
|
|
:required="$required"
|
|
selected_value="{{$selected_format??''}}">
|
|
<x-bladewind::select-item label="{{ __('bladewind::timepicker.AM') }}" value="AM"/>
|
|
<x-bladewind::select-item label="{{ __('bladewind::timepicker.PM') }}" value="PM"/>
|
|
</x-bladewind::select>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
<input type="hidden" class="bw-time-{{$name}}" name="{{$name}}" value="{{str_replace(' ', '', $selected_value)}}"/>
|
|
@endif
|
|
|
|
<script>
|
|
const setTime_{{$name}} = (value) => {
|
|
let field = domEl(`.bw-time-{{$name}}`);
|
|
if (field) {
|
|
let hour = domEl('.bw-{{$name}}_hh').value;
|
|
let minute = ':' + domEl('.bw-{{$name}}_mm').value;
|
|
let format = domEl('.bw-{{$name}}_format').value;
|
|
field.value = `${hour}${minute}${format ?? ''}`;
|
|
}
|
|
}
|
|
</script>
|