Tiga Cara Menghitung Selisih Tanggal di JavaScript

Apr 2, 2023 by Ellyx Christian Level: Menengah Komentar Print

Di PHP kita bisa menggunakan fungsi diff dari class DateTime untuk menghitung selisih tanggal. Sedangkan di JavaScript kita harus menggunakan cara yang berbeda. Yang paling sederhana adalah menggunakan fungsi Date dari javascript. Menghitung selisih tanggal di javascript bisa digunakan untuk melakukan validasi, misalnya tanggal yang dipilih pengguna harus 7 hari dari sekarang. Berikut adalah tiga cara menghitung selisih tanggal menggunakan javascript.

Video Tutorial Hitung selisih tanggal dengan javascript

Menggunakan Vanila JavaScript

Vanilas javascript adalah javascript murni tanpa menggunakan library. Kita akan menggunakan fungsi Date seperti di bawah

<script>
var tanggal1 = new Date('2023-04-02'); // new Date() saja akan menghasilkan tanggal sekarang
var tanggal2 = new Date('2023-04-10'); // format tanggal YYYY-MM-DD, tahun-bulan-hari

// set jam menjadi jam 12 malam, atau 00
tanggal1.setHours(0, 0, 0, 0);
tanggal2.setHours(0, 0, 0, 0);

var selisih = Math.abs(tanggal1 - tanggal2);
// Selisih akan dalam millisecond atau mili detik

var hariDalamMillisecond = 1000 * 60 * 60 * 24; // 1000 * 1 menit * 1 jam * 1 hari

var selisihTanggal = Math.round(selisih / hariDalamMillisecond);
// Hasilnya adalah 8 hari
</script>

Menggunakan MomentJs

MomentJs adalah library javascript yang sangat populer untuk memanipulasi tanggal, bukan hanya untuk menghitung selisih tanggal. Kalian bisa mendownload momenjs dari https://momentjs.com/. Menggunakan momentjs akan memberikan hasil yang lebih akurat bahkan sampai ke selisih detik. Berikut adalah cara menghitung selisih tanggal dengan momentjs.

<script src="moment.min.js"></script>
<script>
var tanggal1 = new moment('2023-04-02'); 
var tanggal2 = new moment('2023-04-10'); 
var selisih = tanggal2.diff(tanggal1, 'days');
// hasilnya adalah 8 hari
</script>

Menggunakan momentjs menjadikan kode lebih pendek. Selain itu kita juga bisa menggunkan fungsi from atau to seperti di bawah

tanggal1.to(tanggal2); // hasilnya "in 8 days"
tanggal1.from(tanggal2); // hasilnya "8 days ago"

Dokumentasi fungsi fungsi lainnya ada di https://momentjs.com/docs

Menggunakan Luxon

Bagi kalian yang menggunakan React atau Typescript atau ES6 kalian dapat menggunakan Luxon agar mendapatkan kode yang optimal dengan fitur tree-shaking. Luxon dikembangkan oleh salah satu kontributor MomentJs. Jadi kodenya akan mirip. Cara menginstall Luxon tergantung dari yang kalian gunakan apakah React atau Typescript, ES6 atau Webpack yang dapat di lihat di https://moment.github.io/luxon/#/install. Berikut adalah contoh kode untuk menggunakan Luxon di ES6.

import { DateTime } from "luxon";
var tanggal1 = DateTime.fromISO('2023-04-02'); 
var tanggal2 = DateTime.fromISO('2023-04-10'); 
var durasi = tanggal2.diff(tanggal1);
var selisih = durasi.as('days');

Silahkan login atau register sebelum meninggalkan komentar.