Pusat Ilmu Secara Detil

Menampilkan Nama Hari Dan Tanggal Indonesia Pada Website

Menampilkan Nama Hari Dan Tanggal Indonesia Pada Website

Edisi tutorial pemrograman web kita kali ini akan membahas tentang cara menampilkan tanggal dan nama hari dalam format indonesia dengan menggunakan bootstrap-datetimepicker dan librari moment-with-locales.js.

Pada tutorial sebelumnya tentang "jquery datetimepicker tanggal format indonesia", kita telah menyajikan cara membuat tanggal dengan format tanggal indonesia (belum menampilkan nama hari). Edisi tutorial lanjutan kali ini akan menambahkan nama hari pada format tanggal indonesia.

Hasil akhir atau output yang akan kita kerjakan dalam tutorial ini, ditunjukkan oleh Gambar.1 dibawah ini :
(Gambar.1 )

Dari gambar.1 diatas, pembuatan tanggal yang menampilkan nama hari secara default (format global) akan menampilkan sistem penanggalan tanggal dalam bahasa inggris. Disisi kanan, nama hari dan tanggalnya disajikan dalam bahasa indonesia.

Langkah-langkahnya

1. Memanggil library 
Karena kita menggunakan boostrap sebagai frontend-nya, maka ada beberapa librari yang kita gunakan selain libari diatas, yaitu :
  • bootstrap.min.css
  • ilmudetil.css
  • bootstrap-datetimepicker.css
  • bootstrap.min.js
  • moment-with-locales.js
  • jquery-1.11.3.min.js
  • bootstrap-datetimepicker.js
Letakkan proses pemanggilan library dalam file utama diantara tag <head>....</head> :
<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 Tanggal Indonesia</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>

2. Membuat navigasi bar
Pembuatan navigasi bari ini bukanlah inti dalam membuat tanggal format indonesia. Bagian ini hanya asesoris untuk mempercantik tampilan. Tujuannya agar dihasilkan navigasi bar yang dilengkapi menu seperti Gambar.1 diatas :
<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>

3. Membuat form input tanggal
Dalam langkah ke-3 ini, kita akan membuat form input tanggal. Sehingga nantinya akan ditampilkan tanggal seperti kalender :
<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>
			</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="tgl3">
						<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="tgl4">
						<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>
			</div>
		</div>
	</div>
</div>

4. Membuat fungsi  jquery
Tujuan dari langkah ke-4 ini adalah memberi efek perubahan tanggal dalam format yang diingatkan. Dalam fungsi ini, setiap id yang telah kita definisikan pada langkah ke-3, kita atur format nama hari dan tanggalnya :
<script>
$(function() {
     
  $('#tgl1').datetimepicker({format : "ddd,DD/MM/YYYY"});
  $('#tgl2').datetimepicker({format : "dddd,DD/MMM/YYYY"});
  
  $('#tgl3').datetimepicker({
	   locale:'id',
	   format:'ddd,DD/MMM/YYYY'
   });
  $('#tgl4').datetimepicker({
	   locale:'id',
	   format:'dddd,DD/MMMM/YYYY'
   });
});
</script>

Seperti yang terlihat pada script diatas, kita memiliki format :
  • ddd, DD/MM/YYY, akan menampilkan tanggal seperti :Thu,22/12/2016. Format 'ddd' akan menampilkan nama hari secara ringkas.
  • dddd, DD/MMM/YYYY, akan menampilkan tanggal seperti :Thursday,22/Dec/2016. Format 'dddd' akan menampilkan nama hari secara keseluruhan.

Untuk menginginkan format hari dan tanggal indonesia, kita tinggal tambahkan 'locale:id'.


Share this:

You Might Also Like:

Disqus Comments