132 lines
5.2 KiB
PHP
132 lines
5.2 KiB
PHP
@props([
|
|
'name' => 'date',
|
|
'id' => 'date',
|
|
'value' => '',
|
|
'required' => false,
|
|
'error' => null,
|
|
'label' => 'Date',
|
|
'minYear' => null,
|
|
'maxYear' => null,
|
|
'minAge' => null,
|
|
'maxAge' => null
|
|
])
|
|
|
|
@php
|
|
$currentYear = date('Y');
|
|
|
|
// Calculate year range - support both direct year values and age-based calculation
|
|
if ($minYear !== null && $maxYear !== null) {
|
|
// Direct year range specified
|
|
$startYear = $maxYear;
|
|
$endYear = $minYear;
|
|
} elseif ($minAge !== null && $maxAge !== null) {
|
|
// Age-based calculation (for birthdates)
|
|
$startYear = $currentYear - $minAge;
|
|
$endYear = $currentYear - $maxAge;
|
|
} else {
|
|
// Default: current year to 100 years ago
|
|
$startYear = $currentYear;
|
|
$endYear = $currentYear - 100;
|
|
}
|
|
|
|
// Parse existing value
|
|
$selectedDay = '';
|
|
$selectedMonth = '';
|
|
$selectedYear = '';
|
|
if ($value) {
|
|
$parts = explode('-', $value);
|
|
if (count($parts) === 3) {
|
|
$selectedYear = $parts[0];
|
|
$selectedMonth = $parts[1];
|
|
$selectedDay = $parts[2];
|
|
}
|
|
}
|
|
@endphp
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">{{ $label }}@if($required) <span class="text-danger">*</span>@endif</label>
|
|
<div class="row g-2">
|
|
<div class="col-4">
|
|
<select id="{{ $id }}_day"
|
|
class="form-select @if($error) is-invalid @endif"
|
|
{{ $required ? 'required' : '' }}
|
|
onchange="updateDate_{{ $id }}()">
|
|
<option value="">Day</option>
|
|
@for($day = 1; $day <= 31; $day++)
|
|
@php $dayPadded = str_pad($day, 2, '0', STR_PAD_LEFT); @endphp
|
|
<option value="{{ $dayPadded }}" {{ $selectedDay == $dayPadded ? 'selected' : '' }}>
|
|
{{ $day }}
|
|
</option>
|
|
@endfor
|
|
</select>
|
|
</div>
|
|
<div class="col-4">
|
|
<select id="{{ $id }}_month"
|
|
class="form-select @if($error) is-invalid @endif"
|
|
{{ $required ? 'required' : '' }}
|
|
onchange="updateDate_{{ $id }}()">
|
|
<option value="">Month</option>
|
|
<option value="01" {{ $selectedMonth == '01' ? 'selected' : '' }}>January</option>
|
|
<option value="02" {{ $selectedMonth == '02' ? 'selected' : '' }}>February</option>
|
|
<option value="03" {{ $selectedMonth == '03' ? 'selected' : '' }}>March</option>
|
|
<option value="04" {{ $selectedMonth == '04' ? 'selected' : '' }}>April</option>
|
|
<option value="05" {{ $selectedMonth == '05' ? 'selected' : '' }}>May</option>
|
|
<option value="06" {{ $selectedMonth == '06' ? 'selected' : '' }}>June</option>
|
|
<option value="07" {{ $selectedMonth == '07' ? 'selected' : '' }}>July</option>
|
|
<option value="08" {{ $selectedMonth == '08' ? 'selected' : '' }}>August</option>
|
|
<option value="09" {{ $selectedMonth == '09' ? 'selected' : '' }}>September</option>
|
|
<option value="10" {{ $selectedMonth == '10' ? 'selected' : '' }}>October</option>
|
|
<option value="11" {{ $selectedMonth == '11' ? 'selected' : '' }}>November</option>
|
|
<option value="12" {{ $selectedMonth == '12' ? 'selected' : '' }}>December</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-4">
|
|
<select id="{{ $id }}_year"
|
|
class="form-select @if($error) is-invalid @endif"
|
|
{{ $required ? 'required' : '' }}
|
|
onchange="updateDate_{{ $id }}()">
|
|
<option value="">Year</option>
|
|
@for($year = $startYear; $year >= $endYear; $year--)
|
|
<option value="{{ $year }}" {{ $selectedYear == $year ? 'selected' : '' }}>
|
|
{{ $year }}
|
|
</option>
|
|
@endfor
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<input type="hidden" id="{{ $id }}" name="{{ $name }}" value="{{ $value }}">
|
|
@if($error)
|
|
<span class="invalid-feedback d-block" role="alert">
|
|
<strong>{{ $error }}</strong>
|
|
</span>
|
|
@endif
|
|
</div>
|
|
|
|
@once
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize all date dropdown components
|
|
document.querySelectorAll('[id$="_day"]').forEach(function(daySelect) {
|
|
const baseId = daySelect.id.replace('_day', '');
|
|
if (document.getElementById(baseId + '_month') && document.getElementById(baseId + '_year')) {
|
|
// Component exists, initialize it
|
|
window['updateDate_' + baseId] = function() {
|
|
const day = document.getElementById(baseId + '_day').value;
|
|
const month = document.getElementById(baseId + '_month').value;
|
|
const year = document.getElementById(baseId + '_year').value;
|
|
const hidden = document.getElementById(baseId);
|
|
|
|
if (day && month && year) {
|
|
hidden.value = `${year}-${month}-${day}`;
|
|
} else {
|
|
hidden.value = '';
|
|
}
|
|
};
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|
|
@endonce
|