Membuat DatePicker dengan Jquery

Terkadang dalamCara mengatasai Cannot modify header PHP. Read more ... » pembuatan Form suatu web, kitaCara mengatasi Install DotNet 3.5 Windows 8. Read more ... » akan memerlukan sebuah inputan tanggal. UntukBasic Pattern Recognition. Read more ... » itu kank burhanudin akan share caraMenjalankan Aplikasi Android di Windows. Read more ... » Membuat Datepicker denganTUGAS STRUKTUR DATA KELAS SAMI. Read more ... » JqueryBelajar JQuery I. Read more ... ». Disini sengaja sayaMembuka Command Prompt mode Administrator. Read more ... » menggunakan jquery selain style yangTanya Jawab seputar pemrograman. Read more ... » dimiliki, tetapi juga dapat digunakan dengan mudah.

Langsung saja ke permasalahan dengan membuat Form berikut simpan dengan nama tanggal.html :

<html>
<head>
<title> Form dengan Datepicker </title>
</head>
<body>
Masukan Tanggal : <br/>
<input type="text" name="tgl" id="tanggal" />
</body>
</html>

Source diatas akan menghasilkan suatu form tanggal, tetapi belum disisipi jquery. Untuk menyisipkan query, terlebih dahulu download bunddle jquery datepicker disini. Ektrak file tersebut kedalam folder tanggal, kemudian ketika lagi source berikut :

<html>
<head>
<title> Form dengan Datepicker </title>
<link rel="stylesheet" href="tanggal/development-bundle/themes/base/jquery.ui.all.css">
	<script src="tanggal/js/jquery-1.7.1.min.js"></script>
	<script src="tanggal/development-bundle/ui/jquery.ui.core.js"></script>
	<script src="tanggal/development-bundle/ui/jquery.ui.widget.js"></script>
	<script src="tanggal/development-bundle/ui/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="tanggal/development-bundle/demos/demos.css">
	<script>
	$(function() {
		$( "#tanggal" ).datepicker({ altFormat: 'yy-mm-dd' });

	});
	</script>
</head>
<body>
Masukan Tanggal : <br/>
<input type="text" name="tgl" id="tanggal" />
</body>
</html>

Sekarang coba jalankan file diatas jika berhasil maka ketika kursor diletakan pada form input akan keluar tanggal, seperti gambar berikut :

Input Tanggal Jquery

Input Tanggal dengan Jquery

Permasalahan akan muncul, ketika kita gunakan form tersebut kedalam database mysql dengan format tanggal ‘yy-mm-dd’ atau 2012-01-19, untuk itu kita perlu mensetting format datepicker dengan menambahkan source berikut :

<script>
	$(function() {
		$( "#tanggal" ).datepicker({ altFormat: 'yy-mm-dd' });
		$( "#tanggal" ).change(function() {
             $( "#tanggal" ).datepicker( "option", "dateFormat","yy-mm-dd" );
         });
	});
	</script>

Nah dengan tambahan source diatas, maka format date time akan berubah dan dapat digunakan di mysql. selamat mencoba
by burhanudin

Posted in Html, PHP & mySQL, Programing and tagged , , .