update date picker in pesan buket module to flat picker

This commit is contained in:
LailaWulandarii 2026-01-15 19:14:23 +07:00
parent 2996f49f26
commit 28c5206b9d
4 changed files with 41 additions and 8 deletions

View File

@ -1566,6 +1566,15 @@ input[type="time"].formulirbuket-input {
font-size: 0.9rem;
}
.flatpickr-calendar.hasTime.noCalendar {
width: 240px !important;
min-width: 0 !important;
}
.flatpickr-time {
border-top: none !important;
}
.summary-item {
display: flex;
flex-direction: column;

View File

@ -18,6 +18,7 @@
<link href="{{ asset('vendors/swiper/swiper-bundle.min.css') }}" rel="stylesheet">
<link href="{{ asset('vendors/aos/aos.css') }}" rel="stylesheet">
<link href="{{ asset('css/user/main.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script>
(function() {
@ -153,6 +154,8 @@ class="bi bi-tiktok"></i></a>
});
}
</script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
</body>
</html>

View File

@ -24,7 +24,7 @@ class="stretched-link"></a>
<div class="row mt-5" id="custom-pagination">
<div class="col-12 d-flex justify-content-between align-items-center">
{{-- TOMBOL PREVIOUS --}}
<div class="text-start" style="width: 160px;">
<div class="text-start" style="width: 16e0px;">
@if ($buket->onFirstPage())
<span class="btn btn-pagination btn-sm rounded-pill px-3 disabled" style="opacity: 0.5;">
<i class="bi bi-chevron-left me-1"></i> Sebelumnya
@ -54,7 +54,7 @@ class="page-number text-decoration-none text-muted px-3 py-1 mt-0">
</div>
{{-- TOMBOL NEXT --}}
<div class="text-end" style="width: 160px;">
<div class="text-end" style="width: 16e0px;">
@if ($buket->hasMorePages())
<a href="{{ $buket->nextPageUrl() }}" class="btn btn-pagination btn-sm rounded-pill px-3">
Selanjutnya <i class="bi bi-chevron-right ms-1"></i>

View File

@ -86,11 +86,20 @@ class="form-control formulirbuket-input @error('tgl_ambil') is-invalid @enderror
@enderror
</div>
<div class="col-md-6">
<label class="form-label small">Waktu Pengambilan</label>
<input type="time" name="waktu_ambil"
class="form-control formulirbuket-input @error('waktu_ambil') is-invalid @enderror"
min="09:00" max="21:00" value="{{ old('waktu_ambil') }}">
<small class="text-muted">Jam operasional: 09.00 - 21.00 WIB</small>
<label class="form-label small">Waktu Pengambilan</label>
<div class="input-group">
<input type="text" id="jam_picker" name="waktu_ambil"
class="form-control formulirbuket-input bg-white @error('waktu_ambil') is-invalid @enderror"
placeholder="Pilih Jam Pengambilan" value="{{ old('waktu_ambil') }}"
readonly>
<span class="input-group-text bg-white"><i class="bi bi-clock"></i></span>
</div>
<small class="text-muted">Jam operasional: 09:00 - 21:00 WIB</small>
@error('waktu_ambil')
<div class="invalid-feedback d-block">{{ $message }}</div>
@enderror
@ -237,7 +246,19 @@ class="btn formulirbuket-btn-cancel flex-fill">Batalkan</a>
}
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
flatpickr("#jam_picker", {
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
time_24hr: true,
minTime: "09:00",
maxTime: "21:00",
disableMobile: "true"
});
});
</script>
@endsection