novy/aplikasi-ketertiban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: flatpickr date picker premium di semua input tanggal

Browse Source 
- 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
1 changed files with 31 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/layouts/app.blade.php
+31
View File
@@ -41,6 +41,19 @@
.animate-fade-in { animation: fadeInUp 0.3s ease-out; } .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); } .stat-card-glow:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); transform: translateY(-1px); }
</style> </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') @stack('styles')
</head> </head>
<body class="h-full antialiased"> <body class="h-full antialiased">
@@ -255,6 +268,24 @@
</div> </div>
</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') @stack('scripts')
{{-- Reverb Config --}} {{-- Reverb Config --}}