Tutorial Laravel: Implementasi Flatpickr Date Picker

awen

Tutorial Laravel: Implementasi Flatpickr Datetime Picker

Instalasi Flatpickr

Instal Flatpickr:
- Download Flatpickr dari situs resmi atau gunakan npm dengan perintah npm install flatpickr.
Integrasi Flatpickr:
- Masukkan Flatpickr ke dalam proyek Laravel, misalnya dengan mengkopi file JavaScript dan CSS ke direktori public.

Penerapan di Laravel

Include Flatpickr Assets:

Tambahkan tautan ke file CSS dan JavaScript Flatpickr di dalam file Blade atau template Anda:

     <link rel="stylesheet" href="{{ asset('path/to/flatpickr.min.css') }}">
     <script src="{{ asset('path/to/flatpickr.min.js') }}"></script>

Implementasi di Form:

Tambahkan input date dengan atribut flatpickr pada formulir Laravel:

     <input type="text" name="tanggal" id="tanggal" class="form-control" data-input>

Inisialisasi Flatpickr:

Buat script JavaScript untuk menginisialisasi Flatpickr pada elemen input:

     <script>
         flatpickr('#tanggal', {
             enableTime: false, // Sesuaikan dengan kebutuhan
             dateFormat: 'Y-m-d', // Format tanggal
         });
     </script>

Penerapan di Controller

Validasi di Controller:

Sesuaikan validasi di dalam controller untuk memastikan data tanggal sesuai:

     public function store(Request $request)
     {
         $request->validate([
             'tanggal' => 'required|date',
             // ... tambahkan validasi lainnya ...
         ]);

         // Proses penyimpanan atau manipulasi data
     }

Selamat Mencoba!