JavaScript

Tutorial Menggunakan tanggal-fns dalam JavaScript

Bekerja dengan tanggal bukanlah tugas yang mudah. Namun, paket date-fnsmemudahkan untuk bekerja dengan tanggal dalam JavaScript.

 

Mari selami lebih dalam paket date-fnsuntuk membuat hidup kita lebih mudah dari sebelumnya. Paketnya date-fnsringan.

Menginstal paket

Kita perlu menyiapkan proyek dengan npm untuk bekerja dengan paket pihak ketiga. Mari kita lihat dengan cepat langkah-langkah untuk menyelesaikan penyiapan kita.

Saya berasumsi Anda telah menginstal NodeJS atau IDE untuk mempraktikkan ini.

  • Arahkan ke direktori yang Anda inginkan untuk bekerja.
  • Jalankan perintah npm inituntuk menginisialisasi proyek.
  • Jawab semua pertanyaan berdasarkan preferensi Anda.
  • Sekarang, instal date-fnsmenggunakan perintah di bawah ini

npm install date-fns

Salinan

  • Buat file bernama dateFunctions.js

Sekarang, kami siap untuk masuk ke dalam paket date-fns. Mari kita pergi dan mempelajari beberapa metode penting dari paket.

adalah benar

Semua tanggal tidak valid.

Misalnya, tidak ada tanggal suka 2021-02-30. Bagaimana kami dapat memeriksa apakah tanggal tersebut valid atau tidak?

Metode isValiddari date-fnspaket akan membantu kami menemukan apakah tanggal yang diberikan valid atau tidak.

Periksa apakah kode berikut berfungsi dengan baik atau tidak dengan validitas tanggal.

const { isValid } = require(“date-fns”);

 

console.log(isValid(new Date(“2021, 02, 30”)));

Salinan

Jika Anda menjalankan kode di atas, maka Anda akan menemukan 30th February 2021valid. Oh! Ini bukan.

Mengapa ini terjadi?

JavaScript mengubah hari ekstra Februari menjadi tanggal 1st March 2021yang valid. Untuk mengkonfirmasinya, cetak new Date(“2021, 02, 30”)ke konsol.

console.log(new Date(“2021, 02, 30”));

Salinan

Paket date-fnsmenyediakan metode yang dipanggil parseuntuk mengatasi masalah ini. Metode ini parsemengurai tanggal yang telah Anda berikan dan mengembalikan hasil yang akurat.

Lihat kode di bawah ini.

const { isValid, parse } = require(“date-fns”);

 

const invalidDate = parse(“30.02.2021”, “dd.MM.yyyy”, new Date());

const validDate = parse(“25.03.2021”, “dd.MM.yyyy”, new Date());

 

console.log(isValid(invalidDate));

console.log(isValid(validDate));

Salinan

format

Salah satu penggunaan dasar saat bekerja dengan tanggal adalah memformatnya sesuai keinginan kita. Kami memformat tanggal dalam format yang berbeda menggunakan formatmetode dari date-fnspaket.

Format tanggal sebagai 23-01-19931993-01-23 10:43:55Tuesday, January 23rd 1993, dll .., Jalankan kode berikut untuk mendapatkan yang sesuai tanggal dalam format yang disebutkan.

const { format } = require(“date-fns”);

 

console.log(format(new Date(), “dd-MM-yyyy”));

console.log(format(new Date(), “dd/MM/yyyy HH:mm:ss”));

console.log(format(new Date(), “PPPP”));

Salinan

Anda dapat menemukan daftar format lengkapnya di sini .

addDays

Metode addDaysini digunakan untuk menetapkan tenggat waktu setelah beberapa hari.

Sederhananya, kita dapat menambahkan hari ke tanggal mana pun untuk mendapatkan tanggal hari setelah beberapa hari. Ini memiliki banyak aplikasi.

Katakanlah Anda berulang tahun setelah X hari dan Anda sibuk pada hari-hari itu. Anda mungkin tidak ingat ulang tahun dalam jadwal sibuk Anda. Anda cukup menggunakan addDaysmetode ini untuk memberi tahu Anda tentang ulang tahun setelah X hari. Miliki kodenya.

const { format, addDays } = require(“date-fns”);

 

const today = new Date();

 

// birthday after 6 days

const birthday = addDays(today, 6);

 

console.log(format(today, “PPPP”));

console.log(format(birthday, “PPPP”));

Salinan

Mirip dengan metode addDaysada metode lain seperti addHourssubHoursaddMinutessubMinutesaddSecondssubSecondssubDaysaddWeekssubWeeksaddYearssubYears, dll .., Anda dapat dengan mudah menebak fungsi dari metode dengan nama mereka.

Cobalah.

formatDistance

Menulis kode untuk membandingkan tanggal dari awal adalah mimpi buruk. Mengapa kita tetap membandingkan tanggal?

Ada banyak aplikasi di mana Anda telah melihat perbandingan tanggal. Jika Anda mengambil situs web media sosial, akan ada tagline yang menyebutkan 1 menit yang lalu, 12 jam yang lalu, 1 hari yang lalu, dll., Di sini, kami menggunakan perbandingan tanggal dari tanggal dan waktu posting hingga tanggal dan waktu saat ini.

Metode ini formatDistancemelakukan hal yang sama. Ini mengembalikan jarak antara dua tanggal yang diberikan.

Mari kita tulis program untuk mengetahui usia Anda.

const { formatDistance } = require(“date-fns”);

 

const birthday = new Date(“1956, 01, 28”);

const presentDay = new Date();

 

console.log(`Age: ${formatDistance(presentDay, birthday)}`);

Salinan

eachDayOfInterval

Katakanlah Anda harus mencari tentang nama dan tanggal X hari berikutnya. Metode ini eachDayOfIntervalmembantu kita menemukan hari antara tanggal mulai dan akhir.

Mari kita cari tahu 30 hari ke depan mulai hari ini.

const { addDays, eachDayOfInterval, format } = require(“date-fns”);

 

const presentDay = new Date();

const after30Days = addDays(presentDay, 30);

 

const _30Days = eachDayOfInterval({ start: presentDay, end: after30Days });

 

_30Days.forEach((day) => {

   console.log(format(day, “PPPP”));

});

Salinan

maks dan min

Metode maxdan minmenemukan tanggal maksimum dan minimum di antara tanggal yang diberikan masing-masing. Metode dalam date-fnssangat familiar dan mudah ditebak fungsi dari metode tersebut. Mari menulis beberapa kode.

const { min, max } = require(“date-fns”);

 

const _1 = new Date(“1990, 04, 22”);

const _2 = new Date(“1990, 04, 23”);

const _3 = new Date(“1990, 04, 24”);

const _4 = new Date(“1990, 04, 25”);

 

console.log(`Max: ${max([_1, _2, _3, _4])}`);

console.log(`Min: ${min([_1, _2, _3, _4])}`);

Salinan

isEqual

Anda dapat dengan mudah menebak fungsionalitas metode ini isEqual. Seperti yang Anda pikirkan, metode isEqualini digunakan untuk memeriksa apakah dua tanggal sama atau tidak. Lihat kode contoh di bawah ini.

const { isEqual } = require(“date-fns”);

 

const _1 = new Date();

const _2 = new Date();

const _3 = new Date(“1900, 03, 22”);

 

console.log(isEqual(_1, _2));

console.log(isEqual(_2, _3));

console.log(isEqual(_3, _1));

Salinan

Kesimpulan

Jika kita berbicara tentang setiap metode dalam date-fnspaket, maka dibutuhkan waktu berhari-hari untuk menyelesaikannya. Cara terbaik untuk mempelajari paket apa pun adalah dengan membiasakan diri dengan metode penting darinya dan kemudian membaca dokumentasi untuk informasi lebih lanjut. Terapkan skenario yang sama untuk date-fnspaket tersebut juga.

Anda telah mempelajari metode penting dalam tutorial ini. Cari penggunaan spesifik dalam dokumentasi atau pertimbangkan untuk mengambil kursus online seperti JavaScript, jQuery, dan JSON .

Selamat Coding 👨💻

 

Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Most Popular

To Top