Panduan Pemula untuk DatePicker di ReactJS

Halo, para pengembang yang sedang belajar! Hari ini, kita akan memulai perjalanan yang menarik ke dunia DatePicker di ReactJS. Jangan khawatir jika Anda belum pernah menulis kode sebelumnya - saya akan menjadi panduan ramah Anda, menjelaskan segala sesuatu secara langkah demi langkah. Pada akhir panduan ini, Anda akan dapat menambahkan DatePicker yang handal ke aplikasi React Anda. Ayo masuk ke dalamnya!

Apa Itu DatePicker?

Sebelum kita mulai mengoding, mari kita pahami apa itu DatePicker. Bayangkan Anda memesan penerbangan secara online. Anda perlu memilih tanggal perjalanan, kan? Kalender yang muncul dan memungkinkan Anda memilih tanggal? Itu adalah DatePicker! Itu adalah elemen antarmuka pengguna yang membuat pemilihan tanggal mudah dan intuitif.

Mengapa Menggunakan DatePicker di React?

React tentang menciptakan antarmuka pengguna interaktif, dan DatePicker adalah contoh yang sempurna untuk ini. Itu meningkatkan pengalaman pengguna dengan menyediakan kalender visual untuk pemilihan tanggal, mengurangi kesalahan dan membuat aplikasi Anda lebih ramah pengguna.

Memulai dengan DatePicker di React

Untuk menggunakan DatePicker di React, kita akan menggunakan pustaka populer yang disebut react-datepicker. Pustaka ini menyediakan komponen yang dapat disesuaikan dan mudah untuk diintegrasikan ke dalam aplikasi React kami.

Langkah 1: Menyiapkan Proyek React Anda

Pertama, mari kita buat proyek React baru. Jika Anda sudah punya satu, Anda dapat melompat melewati langkah ini.

npx create-react-app my-datepicker-app
cd my-datepicker-app

Perintah ini membuat aplikasi React baru bernama "my-datepicker-app" dan memindahkan Anda ke direktori proyek.

Langkah 2: Menginstal Pustaka DatePicker

Sekarang, mari kita instal pustaka react-datepicker:

npm install react-datepicker

Perintah ini menambahkan pustaka DatePicker ke proyek Anda.

Menggunakan Komponen DatePicker

Sekarang, mari kita masuk ke bagian yang menyenangkan - menggunakan DatePicker dalam aplikasi kita!

Langkah 1: Mengimpor Modul Yang Diperlukan

Buka file src/App.js Anda dan tambahkan pernyataan import berikut di bagian atas:

import React, { useState } from 'react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

Ini adalah apa yang dilakukan setiap baris:

• Kita mengimpor useState dari React untuk mengelola state komponen kita.
• Kita mengimpor komponen DatePicker dari pustaka yang kami instal.
• Kita mengimpor file CSS untuk menggaya DatePicker kita.

Langkah 2: Membuat Komponen Fungsional

Mari kita buat komponen fungsional yang menggunakan DatePicker kita:

function App() {
const [selectedDate, setSelectedDate] = useState(null);

return (
<div className="App">
<h1>DatePicker Saya yang Menakjubkan</h1>
<DatePicker
selected={selectedDate}
onChange={date => setSelectedDate(date)}
dateFormat="dd/MM/yyyy"
placeholderText="Pilih tanggal"
/>
<p>Tanggal yang dipilih: {selectedDate ? selectedDate.toDateString() : "Tidak ada tanggal yang dipilih"}</p>
</div>
);
}

mari kitauraikan ini:

1. Kita menggunakan useState untuk membuat variabel state selectedDate dan fungsi setSelectedDate untuk memperbaruinya.
2. Kita merender komponen DatePicker dengan beberapa prop:

• selected: Tanggal yang saat ini dipilih
• onChange: Fungsi yang dipanggil saat tanggal baru dipilih
• dateFormat: Cara tanggal ditampilkan
• placeholderText: apa yang ditampilkan saat tidak ada tanggal yang dipilih

3. Kita menampilkan tanggal yang dipilih di bawah pilih, atau pesan jika tidak ada tanggal yang dipilih.

Langkah 3: Menyesuaikan DatePicker

Salah satu hal yang menakjubkan tentang react-datepicker adalah betapa mudahnya untuk disesuaikan. Mari kita lihat beberapa cara kita dapat memodifikasi DatePicker kita:

function App() {
const [selectedDate, setSelectedDate] = useState(null);

return (
<div className="App">
<h1>DatePicker Saya yang Terkhusus</h1>
<DatePicker
selected={selectedDate}
onChange={date => setSelectedDate(date)}
dateFormat="dd/MM/yyyy"
minDate={new Date()}
filterDate={date => date.getDay() !== 6 && date.getDay() !== 0}
showYearDropdown
scrollableYearDropdown
/>
</div>
);
}

Dalam contoh ini:

• minDate={new Date()} memastikan bahwa tanggal yang lalu tidak dapat dipilih.
• filterDate digunakan untuk menonaktifkan hari Sabtu dan Minggu.
• showYearDropdown dan scrollableYearDropdown menambahkan dropdown untuk mengganti tahun secara cepat.

Metode DatePicker

Pustaka react-datepicker menyediakan beberapa metode yang berguna. Berikut adalah tabel yang menggabungkan beberapa di antaranya:

Metode	Deskripsi
setOpen(boolean)	Secara manual menyetel keadaan terbuka kalendar.
setFocus()	Secara manual menyetel fokus pada input.
handleCalendarClose()	Secara manual menutup kalendar.
handleCalendarOpen()	Secara manual membuka kalendar.

Anda dapat menggunakan metode ini dengan membuat ref ke komponen DatePicker:

const datePickerRef = useRef(null);

// Kemudian di JSX Anda
<DatePicker ref={datePickerRef} />

// Untuk menggunakan metode
datePickerRef.current.setOpen(true);

Kesimpulan

Selamat! Anda baru saja belajar bagaimana mengimplementasikan dan menyesuaikan DatePicker di React. Alat ini akan membuat pemilihan tanggal dalam aplikasi Anda mudah bagi pengguna.

Ingat, kunci untuk menguasai React (atau konsep pemrograman lainnya) adalah praktik. Cobalah menambahkan DatePicker ke proyek Anda, eksperimen dengan prop yang berbeda, dan jangan takut untuk mendalami dokumentasi untuk fitur yang lebih tingkat lanjut.

Selamat mengoding, dan semoga tanggal Anda selalu dipilih dengan sempurna! ?️?‍?

Credits: Image by storyset