PT Mitra Tekno Niaga
Hubungi Kami
x
Cara Mengubah Format Tanggal jQuery Datepicker
Pemrograman

19 Januari 2020

Cara Mengubah Format Tanggal jQuery Datepicker

 Hallo sobat, pada tulisan kali ini Saya ingin memberikan tutorial sederhana tentang bagaimana cara mengubah format tanggal pada jQuery Datepicker. Tanpa panjang lebar lagi, Yuk mari baca dan simak tulisan ini sampai habis. Di jamin akan memberikan manfaat yang besar untuk menambah pengetahuan Anda. Oke, langsung saja ya.

Secara default format tanggal pada jQuery Datepicker yaitu "mm/dd/yy". Untuk mengubah format tanggal pada jQuery Datepicker, Anda cukup menambahkan properti dateFormat seperti di bawah ini :

$("#datepicker").datepicker({
    dateFormat:"dd-mm-yy",
});

 Berikut ini adalah contoh script lengkapnya :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cara Mengubah Format Tanggal jQuery Datepicker</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://repo.mitrateknoniaga.com/jquery-ui-1.12.1/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="https://repo.mitrateknoniaga.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://repo.mitrateknoniaga.com/jquery-ui-1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
	$(function(){
	  $("#datepicker").datepicker({
		 dateFormat:"dd-mm-yy",
	  });
	});
</script>
</head>
<body>

<div class="ui-widget">
  <label for="datepicker">Tanggal: </label>
  <input id="datepicker">
</div>

</body>
</html>

 Pada contoh script di atas saya menggunakan format tanggal "dd-mm-yy" sehingga akan menghasilkan Output "20-01-2020". Lihat tampilan Output di bawah ini :

Cara Mengubah Format Tanggal jQuery Datepicker

 

Lalu bagaimana jika Anda ingin mengubah ke format tanggal lainnya agar mudah dibaca? Tenang sudah Saya buatkan formulanya, lihat list format tanggal di bawah ini :

Format Tanggal Hasil
yy-mm-dd 2020-01-20
dd-mm-yy 20-01-2020
dd/mm/yy 20/01/2020
dd MM yy 20 January 2020
DD, dd MM yy Monday, 20 January 2020

 Selesai. Sangat mudah kan?

Demikian pembahasan tentang Cara Mengubah Format Tanggal jQuery Datepicker, semoga tulisan ini bisa memberikan manfaat untuk Anda yang membaca. Sampai jumpa di tulisan berikutnya. Terima Kasih

JavaScript HTML jQuery