Panduan Pemula untuk Pemilihan Tarikh di ReactJS

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

Apa Itu Pemilihan Tarikh?

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

Mengapa Menggunakan Pemilihan Tarikh di React?

React tentang membuat antarmuka pengguna interaktif, dan pemilihan tarikh adalah contoh yang sempurna. Ini meningkatkan pengalaman pengguna dengan menyediakan kalendar visual untuk pemilihan tanggal, mengurangi kesalahan dan membuat aplikasi Anda lebih ramah pengguna.

Memulai dengan Pemilihan Tarikh di React

Untuk menggunakan pemilihan tarikh di React, kita akan menggunakan pustaka populer yang disebut react-datepicker. Pustaka ini menyediakan komponen yang dapat disesuaikan yang kita dapat secara mudah integrasikan ke dalam aplikasi React kita.

Langkah 1: Menyiapkan Proyek React Anda

Pertama, mari kita buat proyek React baru. Jika Anda sudah memiliki satu, Anda dapat 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 Pemilihan Tarikh

Sekarang, mari kita instal pustaka react-datepicker:

npm install react-datepicker

Perintah ini menambahkan pustaka pemilihan tarikh ke proyek Anda.

Menapakan Komponen Pemilihan Tarikh

Sekarang, mari kita masuk ke bagian yang menyenangkan - benar-benar menggunakan pemilihan tarikh di aplikasi kita!

Langkah 1: Mengimpor Modul Yang Diperlukan

Buka file src/App.js 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";

Berikut apa yang dilakukan setiap baris:

• Kita import useState dari React untuk mengelola state komponen kita.
• Kita import komponen DatePicker dari pustaka yang kita instal.
• Kita import file CSS untuk menggaya pemilihan tarikh kita.

Langkah 2: Membuat Komponen Fungsional

Mari kita buat komponen fungsional yang menggunakan pemilihan tarikh:

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

return (
<div className="App">
<h1>Pemilihan Tarikh 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 gunakan useState untuk membuat variabel state selectedDate dan fungsi setSelectedDate untuk memperbarui nya.
2. Kita render 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 tampilkan tanggal yang dipilih di bawah pemilihan, atau pesan jika tidak ada tanggal yang dipilih.

Langkah 3: Menyesuaikan Pemilihan Tarikh

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

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

return (
<div className="App">
<h1>Pemilihan Tarikh Saya yang Terpersonal</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 mengubah tahun secara cepat.

Metode Pemilihan Tarikh

Pustaka react-datepicker menyediakan beberapa metode yang berguna. Berikut adalah tabel yang menggabungkan beberapa dari mereka:

Metode	Deskripsi
setOpen(boolean)	Secara manual menyetel state 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 pemilihan tarikh di React. Alat ini akan membuat pemilihan tanggal di aplikasi Anda menjadi mudah bagi pengguna.

Ingat, kunci untuk menguasai React (atau konsep pemrograman apa pun) adalah latihan. Cobalah menambahkan pemilihan tarikh ke proyek Anda, eksperimen dengan prop yang berbeda, dan jangan takut untuk masuk ke dalam dokumentasi untuk fitur yang lebih tingkat lanjut.

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

Credits: Image by storyset