--> Skip to main content
Home Bootstrap Jquery Pemrograman Web Jquery Datetimepicker dengan format tanggal Indonesia

Jquery Datetimepicker dengan format tanggal Indonesia

Tutorial pemrograman web kita kali ini akan menekankan pada cara membuat tanggal dengan format indonesia.

Seringkali dalam kebutuhan mengdevelop sebuah web diperlukan penambahan input tanggal, baik diletakkan dalam sebuah artikel ataupun digunakan dalam inputan tanggal lahir, inputan untuk tanggal sebuah agenda dsb.

Dalam membuat form input tanggal yang mirip seperti kalender, kita dapat menggunakan libary datetimepicker. Format tanggal yang disajikan masih dalam bentuk format global. Untuk itu, dalam tutorial ini juga akan disajikan bagaimana menyajikan form input tanggal dengan format bahasa Indonesia dengan menggunakan bantuan libary moment-with-locales.js.

Dalam librari moment-with-locale.js sudah dimasukkan kategori pemilihan tanggal menurut penanggalan dari sebuah negara termasuk sistem penanggalan format indonesia. Dengan demikian libary ini sangat membantu kita dalam menformat tanggal dalam versi tanggal indonesia.

Output atau hasil akhir dari tutorial ini ditunjukkan oleh Gambar.1 dibawah ini :

(Gambar.1 )

Seperti yang terlihat pada Gambar.1, sebelah kiri adalah penulisan tanggal dalam format global yang disajikan dalam tiga model. Penulisan bulannya masih dalam format bahasa inggris.

Pada sisi kanan adalah format tanggal bahasa indonesia dimana penulisan bulannya dalam bentuk format bulan bahasa indonesia (misal : desember , bukan december).

Membuat input tanggal dengan jquery

Dalam tutorial ini, proses pembuatan input tanggal disajikan bersama dengan Bootstrap. Library yang digunakan dalam pembuatan tanggal adalah :
  • bootstrap-datetimepicker.css
  • bootstrap-datetimepicker.js
  • moment-with-locales.js
Sebelum kita akan membuat format tanggal indonesia, terlebih dahulu kita membuat format tanggal bawaan dari boostrap-datetimepicker.

Berikut ini adalah snippet code untuk membuat tanggal dengan datetimepicker :
<div class="container">
 <div class="row">
  <div class="col-md-4">
  <div class="panel panel-default">
   <div class="panel-heading">Format Global</div>
   <div class="panel-body">
    <div class="form-group">
     <label>Format :DD/MM/YYYY</label>
     <div class="input-group date" id="tgl1">
      <input type="text" class="form-control" placeholder="Cth:20/12/2016"/> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
     </div>
    </div>
    <div class="form-group">
     <label>Format :DD/MM/YYYY</label>
     <div class="input-group date" id="tgl2">
      <input type="text" class="form-control" placeholder="Cth:21/Dec/2016"/> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
     </div>
    </div>
    <div class="form-group">
     <label>Format :DD/MM/YYYY</label>
     <div class="input-group date" id="tgl3">
      <input type="text" class="form-control" placeholder="Cth:21-December-2016"/> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
     </div>
    </div>
   </div>
   </div>
  </div>
 </div>
</div>
<script>
 $(function() { 
   $('#tgl1').datetimepicker({format : "DD/MM/YYYY"});
   $('#tgl2').datetimepicker({format : "DD/MMM/YYYY"});
   $('#tgl3').datetimepicker({format : "DD/MMMM/YYYY"});
 });
</script>


Sehingga akan dihasilkan output seperti Gambar.2 dibawah ini :

(Gambar.2 )

Inti dari kode diatas sehingga menghasilkan output seperti Gambar.2 adalah:
<script>
 $(function() { 
   $('#tgl1').datetimepicker({format : "DD/MM/YYYY"});
   $('#tgl2').datetimepicker({format : "DD/MMM/YYYY"});
   $('#tgl3').datetimepicker({format : "DD/MMMM/YYYY"});
 });
</script>

Seperti yang terlihat kita menggunakan tiga model format :
  • DD/MM/YYYY, akan menghasilkan tanggal seperti 21/12/2016. Jadi bagian MM akan menampilkan bulan dalam bentuk numerik.
  • DD/MMM/YYYY, akan menghasilkan tanggal seperti 21/Dec/2016. Jadi bagian MMM akan mengambil nama singkatan bulannya.
  • DD/MMMM/YYYY, akan menghasilkan tanggal seperti 21/December/2016. Jadi jika kita gunakan MMMM, maka akan ditampilkan nama bulannya secara penuh.

Sedangkan #tgl1, #tgl2 dan #tgl3 adalah nama-nama id yang sebelumnya telah kita definisikan pada class input-group date.

Membuat tanggal dengan format tanggal Indonesia

Seperti yang sudah dijelaskan diatas, kita menggunakan bantuan libary moment-with-locales.js untuk merubah tanggal ke dalam format tanggal indonesia.Sehingga disini kita memadukan antara library datetimepicker.js dengan moment-with-locales.js.
<div class="container">
 <div class="row">
  <div class="col-md-4">
  <div class="panel panel-default">
   <div class="panel-heading">Format Tanggal Indonesia</div>
   <div class="panel-body">
    <div class="form-group">
     <label>Format :DD-MMM-YYYY</label>
     <div class="input-group date" id="tgl4">
      <input type="text" class="form-control" placeholder="Cth:21/Des/2016"/> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
     </div>
    </div>
    <div class="form-group">
     <label>Format :DD/MMMM/YYYY</label>
     <div class="input-group date" id="tgl5">
      <input type="text" class="form-control" placeholder="21/Desember/2016"/> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
     </div>
    </div>
    <div class="form-group">
     <label>Format :DD/MMMM/YYYY</label>
     <div class="input-group date" id="tgl6">
      <input type="text" class="form-control" placeholder="Cth:21-December-2016"/> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
     </div>
    </div>
   </div>
  </div>
  </div>
 </div>
</div>
<script>
$(function() {
  $('#tgl4').datetimepicker({
    locale:'id',
    format:'DD/MMM/YYYY'
   });
  $('#tgl5').datetimepicker({
    locale:'id',
    format:'DD/MMMM/YYYY'
   });
   $('#tgl6').datetimepicker({
    locale:'id',
    format:'DD-MMMM-YYYY'
   });
});
</script>


Sehingga akan menghasilkan output seperti Gambar.3 dibawah ini :

(Gambar.3 )

Perbedaan kodenya antara pembuatan tanggal format global dengan format tanggal indonesia hanya terletak pada penambahan kode locale:'id'

Source 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 Jquery Tanggal</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="https://code.jquery.com/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">Format Global</div>
   <div class="panel-body">
    <div class="form-group">
     <label>Format :DD/MM/YYYY</label>
     <div class="input-group date" id="tgl1">
      <input type="text" class="form-control" placeholder="Cth:20/12/2016"/> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
     </div>
    </div>
    <div class="form-group">
     <label>Format :DD/MM/YYYY</label>
     <div class="input-group date" id="tgl2">
      <input type="text" class="form-control" placeholder="Cth:21/Dec/2016"/> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
     </div>
    </div>
    <div class="form-group">
     <label>Format :DD/MM/YYYY</label>
     <div class="input-group date" id="tgl3">
      <input type="text" class="form-control" placeholder="Cth:21-December-2016"/> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
     </div>
    </div>
   </div>
   </div>
  </div>
  <div class="col-md-4">
  <div class="panel panel-default">
   <div class="panel-heading">Format Tanggal Indonesia</div>
   <div class="panel-body">
    <div class="form-group">
     <label>Format :DD-MMM-YYYY</label>
     <div class="input-group date" id="tgl4">
      <input type="text" class="form-control" placeholder="Cth:21/Des/2016"/> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
     </div>
    </div>
    <div class="form-group">
     <label>Format :DD/MMMM/YYYY</label>
     <div class="input-group date" id="tgl5">
      <input type="text" class="form-control" placeholder="21/Desember/2016"/> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
     </div>
    </div>
    <div class="form-group">
     <label>Format :DD/MMMM/YYYY</label>
     <div class="input-group date" id="tgl6">
      <input type="text" class="form-control" placeholder="Cth:21-December-2016"/> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
     </div>
    </div>
   </div>
   </div>
  </div>
 </div>
</div>
<script>
$(function() { 
  $('#tgl1').datetimepicker({format : "DD/MM/YYYY"});
  $('#tgl2').datetimepicker({format : "DD/MMM/YYYY"});
  $('#tgl3').datetimepicker({format : "DD/MMMM/YYYY"});
 
  $('#tgl4').datetimepicker({
   locale:'id',
   format:'DD/MMM/YYYY'
   });
  $('#tgl5').datetimepicker({
   locale:'id',
   format:'DD/MMMM/YYYY'
   });
   $('#tgl6').datetimepicker({
   locale:'id',
   format:'DD-MMMM-YYYY'
   });
});

</script> 
</body>
</html>


Live Preview Download

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar