Cara Menangani Manajemen Tanggal dan Waktu di React Menggunakan Day.js

Manajemen tanggal dan waktu sangat penting untuk aplikasi apa pun, dan React tidak terkecuali. Meskipun JavaScript menyediakan fungsi manipulasi tanggal dan waktu bawaan, mereka bisa jadi tidak praktis. Untungnya, banyak pustaka pihak ketiga dapat menyederhanakan pengelolaan tanggal dan waktu di React. Salah satu perpustakaan tersebut adalah Day.js.

Day.js adalah library ringan untuk mem-parsing, memvalidasi, memanipulasi, dan memformat tanggal dan waktu dalam JavaScript.

Menginstal Day.js

Itu hari.js perpustakaan adalah alternatif modern untuk Moment.js, yang merupakan pustaka lain yang digunakan untuk menangani tanggal dan waktu. Day.js menawarkan API serupa dengan footprint yang lebih kecil dan performa yang lebih cepat.

Untuk menggunakan Day.js di aplikasi React Anda, Anda harus menginstalnya terlebih dahulu. Anda dapat melakukan ini dengan menjalankan perintah berikut di terminal Anda:

npm instal dayjs

Parsing dan Memformat Tanggal dan Waktu

Day.js menyediakan API sederhana untuk mem-parsing dan memformat tanggal. Anda bisa mendapatkan tanggal dan waktu menggunakan dayjs() tetapi pertama-tama, Anda perlu mengimpornya dari pustaka Day.js.

Misalnya:

impor Reaksi dari'reaksi';
impor dayjs dari'hari';
fungsiAplikasi() {
const tanggal = harijs();
menghibur.log (tanggal); 
kembali (



Tanggal dan Manajemen Waktu</p>
 </div>
 )
}
eksporbawaan Aplikasi

Itu dayjs() metode membuat objek Day.js baru yang mewakili tanggal dan waktu tertentu. Pada contoh di atas, the dayjs() metode membuat objek Day.js yang mewakili tanggal dan waktu saat ini.

Di konsol Anda, objek Day.js akan terlihat seperti ini:

Itu dayjs() metode menerima argumen tanggal opsional yang dapat berupa string, angka (cap waktu Unix), objek Tanggal JavaScript, atau objek Day.js lainnya. Metode ini akan menghasilkan objek Day.js yang mewakili argumen tanggal yang ditentukan.

Misalnya:

impor Reaksi dari'reaksi';
impor dayjs dari'hari';
fungsiAplikasi() {
const tanggal = harijs('2023-05-01');
menghibur.log (tanggal); // Objek Day.js mewakili tanggal yang ditentukan
const tanggal unix = harijs(1651382400000);
menghibur.log (unixDate); // Objek Day.js mewakili tanggal yang ditentukan
kembali (



Tanggal dan Manajemen Waktu</p>
 </div>
 )
}
eksporbawaan Aplikasi

Keluaran objek Day.js dari blok kode ini akan mirip dengan blok kode sebelumnya tetapi akan memiliki nilai properti yang berbeda.

Untuk menampilkan tanggal yang dihasilkan sebagai objek Day.js, Anda perlu menggunakan format() metode. Itu format() metode pustaka Day.js memungkinkan Anda untuk memformat objek Day.js sebagai string sesuai dengan format string tertentu.

Metode mengambil string format sebagai argumennya. Argumen string dapat menyertakan kombinasi huruf dan karakter khusus, masing-masing dengan arti tertentu,

Misalnya:

impor Reaksi dari'reaksi';
impor dayjs dari'hari';
fungsiAplikasi() {
const tanggal = harijs('2023-05-01').format('dddd, MMMM D, YYYY'); // Senin, 1 Mei 2023
const waktu = dayjs().format('HH: mm: ss'); //09:50:23
const tanggal unix = harijs(1651382400000).format('MM/DD/YY'); // 05/01/22
kembali (



{tanggal}</p>

{unixDate}</p>

{waktu}</p>
 </div>
 )
}
eksporbawaan Aplikasi

Itu tanggal variabel akan menampilkan tanggal dalam format ini 'Rabu, 26 April 2023'. Rangkaian formatnya adalah 'dddd, MMMM D, YYYY' Di mana dddd adalah hari dalam seminggu, MMMM adalah bulan dalam kata-kata, D adalah hari dalam sebulan dalam satu atau dua digit, dan YYYY adalah tahun dalam empat digit.

Itu unixDate variabel diformat sebagai string menggunakan format string 'MM/DD/YYYY,' yang mewakili bulan dalam dua digit, hari bulan dalam dua digit, dan tahun dalam empat digit.

Itu waktu variabel menampilkan waktu saat ini dalam format yang ditentukan. Rangkaian formatnya adalah 'HH: mm: ss' Dimana HH mewakili jam, the mm mewakili menit, dan ss mewakili detik.

Memanipulasi Tanggal dan Waktu

Day.js menyediakan beberapa metode yang memudahkan manipulasi tanggal dan waktu. Anda dapat merujuk ke hari.js dokumentasi resmi untuk mendapatkan daftar lengkap metode yang tersedia untuk memanipulasi tanggal dan waktu.

Misalnya:

impor Reaksi dari'reaksi';
impor dayjs dari'hari';
fungsiAplikasi() {
const tanggal = dayjs().add(7,'hari').format('dddd, MMMM D, YYYY'); // Rabu, 16 Juni 2023 
const waktu = harijs().kurangi(2, 'jam').format('HH: mm: ss'); // 07:53:00
kembali (



{tanggal}</p>

{waktu}</p>
 </div>
 )
}
eksporbawaan Aplikasi

Blok kode di atas menggunakan menambahkan() metode untuk menambahkan 7 hari ke tanggal saat ini. Itu menambahkan() metode memungkinkan Anda menambahkan jumlah waktu tertentu ke objek Day.js. Metode ini membutuhkan dua argumen, jumlah waktu untuk menambahkan angka dan satuan waktu untuk menambahkan.

Dengan mengurangi() metode, Anda dapat mengurangi jumlah waktu tertentu dari hari.js obyek. Itu waktu variabel mengurangi 2 jam dari waktu saat ini menggunakan mengurangi() metode.

Menampilkan Waktu Relatif

Day.js menyediakan beberapa metode diantaranya mulai sekarang(), sekarang(), ke(), Dan dari() untuk menampilkan waktu relatif, seperti "2 jam yang lalu" atau "dalam 3 hari". Untuk menggunakan metode ini, impor file relativeTime plugin dari dayjs/plugin/relativeTime dalam aplikasi Bereaksi Anda.

Misalnya:

impor Reaksi dari'reaksi';
impor dayjs dari'hari';
impor relativeTime dari'dayjs/plugin/relativeTime';
fungsiAplikasi() {
 dayjs.extend (waktu relatif);

const tanggal = dayjs().add(7, 'hari')
const tanggal relatif = tanggal.fromNow(); // dalam 7 hari
const tanggal2 = dayjs().kurangi(2, 'jam');
const tanggal2 relatif = tanggal2.keSekarang(); // dalam 2 jam
const tahun lalu = harijs().kurangi(1, 'tahun');
const diff = tanggal.dari (Tahun lalu); // dalam setahun
const diff2 = tanggal.ke (Tahun lalu) // tahun lalu
kembali (



{ tanggal relatif </p>

{ relativeDate2 </p>

{ beda </p>

{ beda2 </p>
 </div>
 )
}
eksporbawaan Aplikasi

Itu mulai sekarang() fungsi menampilkan string waktu relatif yang mewakili perbedaan antara waktu saat ini dan tanggal yang ditentukan. Dalam contoh ini, mulai sekarang() menampilkan perbedaan antara tanggal dan waktu saat ini.

Itu sekarang() fungsinya mirip dengan mulai sekarang() berfungsi untuk menampilkan string yang mewakili perbedaan antara tanggal yang ditentukan dan waktu saat ini. Ketika Anda menelepon sekarang() fungsi, ini mengembalikan string waktu relatif ke waktu saat ini.

Terakhir, menggunakan dari() Dan ke() fungsi, Anda dapat menampilkan string waktu relatif yang mewakili perbedaan antara dua tanggal yang ditentukan. Dalam contoh ini, Anda mendapatkan perbedaan antara tahun lalu Dan tanggal menggunakan dari() Dan ke() fungsi.

Catatan, Anda juga bisa meneruskan argumen boolean opsional ke mulai sekarang(), sekarang(), dari(), Dan ke() metode untuk menentukan apakah akan menyertakan atau mengecualikan akhiran (mis. "lalu" atau "dalam").

Misalnya:

const tanggal = dayjs().add(7, 'hari')
const relativeDate = tanggal.dariSekarang(BENAR); // 7 hari
const tanggal2 = dayjs().kurangi(2, 'jam');
const tanggal2 relatif = tanggal2.keSekarang(BENAR); // 2 jam
const tahun lalu = harijs().kurangi(1, 'tahun');
const diff = tanggal.dari (Tahun lalu, BENAR) // tahun
const diff2 = tanggal.ke (Tahun lalu, BENAR) // tahun

Lewat PALSU ke argumen akan menampilkan tanggal dengan akhiran.

Mengelola Tanggal dan Waktu Secara Efektif

Mengelola tanggal dan waktu adalah aspek penting dari aplikasi apa pun, dan Day.js menyediakan pustaka yang mudah digunakan dan fleksibel untuk menangani operasi ini dalam aplikasi React. Dengan memasukkan Day.js ke dalam proyek Anda, Anda dapat dengan mudah memformat tanggal dan waktu, mengurai string, dan memanipulasi durasi.

Selain itu, Day.js menawarkan berbagai plugin untuk memperluas fungsionalitasnya dan menjadikannya lebih bertenaga. Apakah Anda sedang membuat kalender sederhana atau sistem penjadwalan yang rumit, Day.js adalah pilihan yang sangat baik untuk mengelola tanggal dan waktu dalam aplikasi React Anda.