update date picker in pesan buket module to flat picker
This commit is contained in:
parent
2996f49f26
commit
28c5206b9d
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue