Halaman Utama Website date-fns

Beberapa hari lalu saat sedang mengerjakan proyek pengembangan website yang memerlukan pengembangan di bagian tanggal, saya awalnya berusaha apakah bisa saya tangani proyek ini tanpa menggunakan package. Awalnya berjalan lancar tanpa kendala, namun setelah melakukan pengembangan ke tahap yang lebih kompleks, ternyata tidak mungkin saya hanya mengandalkan kelas Date bawaan JavaScript saja.

Note

Pembaruan Januari 2026: Sejak artikel ini ditulis, date-fns telah mencapai versi v4.0 yang membawa dukungan Time Zone secara bawaan. Selain itu, JavaScript juga sedang mengadopsi Temporal API secara native yang akan membuat manipulasi tanggal jauh lebih mudah tanpa library tambahan di masa depan.

Di hari itu saya mencoba browsing dan melakukan riset terhadap beberapa utilitas penanggalan di JavaScript. Hal yang paling saya utamakan di sini adalah stabilitas, matang, dan ada fungsi yang saya perlukan. Karena fungsi yang saya perlukan saat itu tidak terlalu kompleks tapi akan sangat kompleks jika dikerjakan secara native dengan kelas Date.

Setelah browsing cukup lama saya mendapat beberapa pilihan yaitu Moment.js, Day.js, dan date-fns. Dan kesimpulan yang saya dapat dari ketiga opsi itu adalah:

• Moment.js: Memiliki fungsi yang banyak namun dukungan terhadap package ini mulai menurun dan catatan pengembangan terakhir saat itu tahun 2020.
• Day.js: ukuran sangat kecil sekitar 2KB namun fitur yang saya butuhkan tidak ada di sana
• date-fns: Ukuran lumayan besar namun fitur yang saya butuhkan ada di sana. Dan catatan pengembangan sering dilakukan.

Maka dari itu, saya di sini merekomendasikan diri untuk menggunakan package date-fns yang ternyata memang sangat membantu mengurangi waktu pengembangan.

Fitur yang saya butuhkan di sini adalah untuk mencari tanggal awal dan akhir dalam satu minggu, serta mendapatkan tanggal awal dan akhir dalam satu bulan.

Untuk mengakali ukuran date-fns yang sangat besar, untungnya saya mengerjakan proyek secara modular sehingga saya bisa menggunakan date-fns hanya pada modul atau fungsi yang diperlukan sehingga ukurannya pun dapat diminimalkan.

Berikut ini fungsi-fungsi yang saya gunakan dalam proyek saat itu:

import { startOfWeek, endOfWeek, startOfMonth, endOfMonth, format} from 'date-fns'

const date = new Date()

// mendapatkan tanggal awal dan akhir di suatu minggu
const startWeekDate = startOfWeek(date)
const endWeekDate = endOfWeek(date)

// mencari tanggal awal dan akhir di suatu bulan
const startOfMonthDate = startOfMonth(date)
const endOfMonthDate = endOfMonth(date)

Lalu, sekarang bagaimana cara memasang package date-fns pada proyeknya? Ada dua pilihan, jika kita melakukan pengembangan menggunakan npm (Node Package Manager) maka cukup dengan mengeksekusi perintah berikut:

npm install date-fns

Jika kita melakukan pengembangan tanpa menggunakan npm, maka cukup menyisipkan package ini secara eksternal seperti ini:

<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.min.js" integrity="sha512-F+u8eWHrfY8Xw9BLzZ8rG/0wIvs0y+JyRJrXjp3VjtFPylAEEGwKbua5Ip/oiVhaTDaDs4eU2Xtsxjs/9ag2bQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Untuk lebih detailnya kita bisa melihat dokumentasi cara penggunaan package date-fns ini.

Pembaruan 2026: date-fns v4 & Native Temporal

Dunia JavaScript bergerak sangat cepat. Di tahun 2026 ini, ada dua perkembangan besar yang perlu Anda ketahui jika berurusan dengan tanggal:

1. date-fns v4: Dukungan Time Zone Bawaan

Dulu, kita harus menggunakan date-fns-tz untuk menangani zona waktu. Sekarang di v4, fitur ini sudah disertakan secara langsung. Anda bisa melakukan konversi zona waktu dengan sangat mudah:

import { formatInTimeZone } from 'date-fns-tz' // Masih umum digunakan atau gunakan fitur v4 terbaru
import { TZDate } from 'date-fns' // Fitur baru di v4

const date = new TZDate(2024, 0, 1, 'Asia/Jakarta')
console.log(date.toString())

2. Tree Shaking yang Lebih Baik

Pastikan Anda selalu menggunakan import spesifik agar ukuran bundle tetap kecil. Bundler modern seperti Vite atau Webpack 5 akan secara otomatis menghapus fungsi yang tidak digunakan (tree shaking).

3. Masa Depan: Temporal API

JavaScript akan segera memiliki Temporal API secara native (saat ini sudah mulai tersedia di Chrome 144+ dan Firefox 139+). Temporal akan menggantikan fungsi-fungsi dasar library seperti date-fns karena ia bersifat immutable dan menangani zona waktu secara jauh lebih baik tanpa overhead library tambahan.

// Contoh masa depan dengan Temporal (Native JS)
const now = Temporal.Now.zonedDateTimeISO('Asia/Jakarta');
console.log(now.toString());

Cukup sekian catatan kali ini semoga bisa membantu memecahkan masalah yang sedang dihadapi. Terutama bagi saya pribadi ini akan sangat membantu bagi saya di masa yang akan datang, karena manusia pasti terkena penyakit lupa, maka tidak ada salahnya jika membuat catatan pribadi seperti ini 😊.

Selebihnya mohon maaf apabila ada salah kata. Terima kasih.