feat: flatpickr date picker premium di semua input tanggal

- Flatpickr (CDN) dengan tema Airbnb — bersih & modern
- Lokalisasi Bahasa Indonesia
- altInput: tampil dd/mm/yyyy, simpan yyyy-mm-dd
- Animasi mulus + shadow premium
- Berlaku otomatis ke semua <input type='date'> di seluruh app
- Style kustom: border-radius 12px, shadow 3D
This commit is contained in:
Bro
2026-07-24 18:25:43 +07:00
parent 4784a0d357
commit cd69638199
+31
View File
@@ -41,6 +41,19 @@
.animate-fade-in { animation: fadeInUp 0.3s ease-out; }
.stat-card-glow:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); transform: translateY(-1px); }
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/airbnb.css">
<style>
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeInUp 0.3s ease-out; }
.stat-card-glow:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); transform: translateY(-1px); }
.flatpickr-calendar { border-radius: 12px !important; box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important; }
.flatpickr-day.selected { border-radius: 8px !important; }
.flatpickr-day.today { border-radius: 8px !important; }
</style>
@stack('styles')
</head>
<body class="h-full antialiased">
@@ -255,6 +268,24 @@
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/id.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
flatpickr.localize(flatpickr.l10ns.id);
document.querySelectorAll('input[type="date"]').forEach(function(el) {
el.type = 'text';
flatpickr(el, {
dateFormat: 'Y-m-d',
altFormat: 'd/m/Y',
altInput: true,
allowInput: true,
animate: true,
});
});
});
</script>
@stack('scripts')
{{-- Reverb Config --}}