Jquery Menghitung Selisih Hari Antara Dua Tanggal

Tutorial pemrograman web kita kali ini akan membahas cara menghitung selisih hari antara dua tanggal yang diinputkan pada sebuah halaman web.

Dalam tutorial ini, kita menggunakan librari bootstrap-datetimepicker dan moment-with-locales.js untuk menampilkan tanggal dalam format indonesia. Silahkan baca tutorial sebelumnya untuk mendapatkan penjelasan cara menggunakan format tanggal indonesia yang dapat anda temukan dalam tutorial "Jquery Datetimepicker Dengan Format Tanggal Indonesia " dan " Menampilkan Nama Hari dan Tanggal Indonesia pada Website".

Penyajian waktu dan tanggal atau biasa disebut timestamp memiliki beberapa jenis, diantaranya:

• Unix timestamp
• ISO 8601 time
• RFC 2822 time

Berikut ini adalah contoh ekivalensi waktu dari masing-masing timestamp tersebut, seperti yang ditunjukkan oleh tabel dibawah ini :

Model Timestamp	Ekivalen
Unix timestamp	1482486323
ISO 8601 time	2016-12-23T16:45:23+07:00
RFC 2822 time	Fri, 23 Dec 2016 16:45:23 +07:00

Seperti yang terlihat di tabel, Fri, 23 Dec 2016 16:45:23 +07:00 memiliki ekivalensi waktu yang sama dengan ISO 8601 time dan Unix timestamp seperti yang ditunjukkan oleh tabel diatas. Satuan dari Unix timestamp dalam bentuk second. Untuk bacaan lebih lanjut tentang ekivalensi timestamp, silahkan baca time conversion dan epochconverter.

Dalam tutorial menghitung selisih hari dengan bootstrap-datetimepicker dan moment-with-locales.js , jenis timestamp yang digunakan adalah RFC 2822 time, kemudian dirubah dalam bentuk Unix timestamp dalam bentuk milisecond.

Ouput atau hasil akhir dari tutorial menghitung selisih hari ditunjukkan oleh Gambar.1 dibawah ini:

(Gambar.1 )

Langkah-langakh membuat perhitungan selisih hari

1. Membuat form inputan tanggal
Disini kita akan membuat dua buah form inputan tanggal, kemudian satu form input untuk menampung selisih hari diantara dua tanggal tersebut :

<div class="container">
 <div class="row">
  <div class="col-md-4">
  <div class="panel panel-default">
   <div class="panel-heading">Mehgitung Selisih Hari</div>
   <div class="panel-body">
    <div class="form-group">
     <label>Tanggal Mulai</label>
     <div class="input-group date" id="tgl1">
      <input type="text" class="form-control" /> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
     </div>
    </div>
    <div class="form-group">
     <label>Tanggal Berakhir</label>
     <div class="input-group date" id="tgl2">
      <input type="text" class="form-control"/> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
     </div>
    </div>
    <div class="form-group">
     <label>Selisih Hari</label>
      <input type="text" class="form-control" id="selisih"/> 
    </div>
   </div>
   </div>
  </div>
  
 </div>
</div>

2. Membuat fungsi inputan tanggal dan perhitungan selisih hari
Dalam fungsi ini, setiap inputan tanggal sudah menggunakan format tanggal Indonesia. Kemudian setiap inputan tanggal disimpan dalam variabel masing-masing, setelah itu dilakukan proses perhitungan selisih hari dengan pemanggilan fungsi CalcDiff() :

<script>
$(function() { 
  $('#tgl1').datetimepicker({
   locale:'id',
   format:'DD/MMMM/YYYY'
   });
   
  $('#tgl2').datetimepicker({
   useCurrent: false,
   locale:'id',
   format:'DD/MMMM/YYYY'
   });
   
   $('#tgl1').on("dp.change", function(e) {
    $('#tgl2').data("DateTimePicker").minDate(e.date);
  });
  
   $('#tgl2').on("dp.change", function(e) {
    $('#tgl1').data("DateTimePicker").maxDate(e.date);
      CalcDiff()
   });
  
});

function CalcDiff(){
var a=$('#tgl1').data("DateTimePicker").date();
var b=$('#tgl2').data("DateTimePicker").date();
    var timeDiff=0
     if (b) {
            timeDiff = (b - a) / 1000;
        }
 
 $('#selisih').val(Math.floor(timeDiff/(86400))+' Hari')   
}
</script>

#tgl1, #tgl2 dan #selisih adalah id yang terdapat pada masing-masing form inputan. Setelah diinputkan tanggal pada id #tgl1 dan #tgl2 .


Kemudian oleh fungsi CalcDiff(), didapatkan nilai inputan kedua tanggal tersebut dalam bentuk timestamp RFC 2822 time. Kode untuk mendapatkan timestamp RFC 2822 time adalah sebagai berikut :

var a=$('#tgl1').data("DateTimePicker").date();
var b=$('#tgl2').data("DateTimePicker").date();

Jadi walaupun kita melihat di form inputan untuk id #tgl1 adalah 23/December/2016, namun nilai yang disimpan oleh var a adalah : Fri, 23 Dec 2016 14:56:52 +07:00. Begitu juga untuk form inputan id #tgl2. Untuk waktunya sendiri bergantung pada local time dari komputer kita.

Selanjutnya dilakukan perubahan tanggal dan waktu dalam Unix timestamp (namun dalam bentuk milisecond) ketika dilakukan perhitungan : timeDiff = (b-a) / 1000. Nilai 1000 mengubah hasil milisecond ke dalam bentuk second.

Dalam 1 hari terdapat 24 jam, 1 jam sama dengan 60 menit dan 1 menit adalah 60 second. Oleh karena itu 1 hari sama dengan  86400 second. Jadi kode dibawah inilah yang mengkonversi nilai dari variabel timeDiff dalam bentuk 'Hari'.

$('#selisih').val(Math.floor(timeDiff/(86400))+' Hari')   

Source Code Lengkapnya

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="author" content="ilmu-detil.blogspot.com">
 <title>Tutorial Menghitung Selisih Hari</title>
 <link rel="stylesheet" href="assets/css/bootstrap.min.css">
 <link rel="stylesheet" href="assets/css/ilmudetil.css">
 <link rel="stylesheet" href="assets/css/bootstrap-datetimepicker.css"/>
 <script src="assets/js/bootstrap.min.js"></script>
 <script src="assets/js/moment-with-locales.js"></script>
 <script src="assets/js/jquery-1.11.3.min.js"></script>
 <script src="assets/js/bootstrap-datetimepicker.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
 <div class="container">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
   </button>
   <a class="navbar-brand" href="index.html">
   Pusat Ilmu Secara Detil</a>
  </div>
  <div class="navbar-collapse collapse">
   <ul class="nav navbar-nav navbar-left">
    <li class="clr1 active"><a href="index.html">Home</a></li>
    <li class="clr2"><a href="">Programming</a></li>
    <li class="clr3"><a href="">English</a></li>
   </ul>
  </div>
 </div>
</div>
</br></br></br></br>

<div class="container">
 <div class="row">
  <div class="col-md-4">
  <div class="panel panel-default">
   <div class="panel-heading">Mehgitung Selisih Hari</div>
   <div class="panel-body">
    <div class="form-group">
     <label>Tanggal Mulai</label>
     <div class="input-group date" id="tgl1">
      <input type="text" class="form-control" /> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
     </div>
    </div>
    <div class="form-group">
     <label>Tanggal Berakhir</label>
     <div class="input-group date" id="tgl2">
      <input type="text" class="form-control"/> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
     </div>
    </div>
    <div class="form-group">
     <label>Selisih Hari</label>
      <input type="text" class="form-control" id="selisih"/> 
    </div>
   </div>
   </div>
  </div>
  
 </div>
</div>
<script>
$(function() { 
  $('#tgl1').datetimepicker({
   locale:'id',
   format:'DD/MMMM/YYYY'
   });
   
  $('#tgl2').datetimepicker({
   useCurrent: false,
   locale:'id',
   format:'DD/MMMM/YYYY'
   });
   
   $('#tgl1').on("dp.change", function(e) {
    $('#tgl2').data("DateTimePicker").minDate(e.date);
  });
  
   $('#tgl2').on("dp.change", function(e) {
    $('#tgl1').data("DateTimePicker").maxDate(e.date);
      CalcDiff()
   });
  
});

function CalcDiff(){
var a=$('#tgl1').data("DateTimePicker").date();
var b=$('#tgl2').data("DateTimePicker").date();
    var timeDiff=0
     if (b) {
            timeDiff = (b - a) / 1000;
        }
 
 $('#selisih').val(Math.floor(timeDiff/(86400))+' Hari')   
}
</script> 
</body>
</html>

Live Preview Download