Cara Membuat DatePicker Sederhana Dengan jQuery UI

Hallo teman-teman, berjumpa lagi dengan saya pada tutorial Dumet School. Di artikel kali ini saya akan memberikan tips dan trik tentang Cara Membuat DatePicker Sederhana Dengan jQuery UI dimana datepicker ini berguna untuk di berikan pada form input tanggal sesuai tanggal,bulan dan tahun yang di pilih. Pada latihan kali ini kita akan membuat form, dan di dalam form tersebut kita akan memberikan datepicker pada input tanggal. Di bawah ini adalah demo gambar yang akan kita buat untuk latihan.

Nah bisa kalian lihat pada demo gambar di atas ini, pada saat di klik pada form input “Tanggal Order” datepicker dengan otomatis aktif dan user tinggal klik tanggal,bulan dan tahun sesuai yang di inginkan. Baik, saatnya kita praktekkan Cara Membuat DatePicker Sederhana Dengan jQuery UI seperti demo gambar di atas. Seperti biasa teman-teman siapkan text editornya kemudian copy script html nya di bawah ini

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Cara Membuat DatePicker Sederhana Dengan jQuery UI</title>
</head>
<body>
	<form>
		<table>
			<tr>
			  <td><label>Nama</label></td>
	    		  <td>:</td>
	    		  <td><input type="text" /></td>
			</tr>
			<tr>
			  <td><label>Alamat: </label></td>
			  <td>:</td>
			  <td><textarea></textarea></td>
			</tr>
			<tr>
			  <td><label>Tanggal Order</label></td>
	    		  <td>:</td>
	    		  <td><input type="text"/></td>
			</tr>
		</table>
	</form> 
</body>
</html>

Dan paste pada text editornya, save dengan index.html lalu jalankan pada browser nya. Hasil nya seperti gambar di bawah ini

Langkah berikutnya kita tambahkan style css nya

<style>
	  body {
	    background: #f5f5f5;
	  }
	  input[type=text] {
	    padding: 5px 35px 10px 20px;
	  }
	  textarea{
	  	padding: 5px 0 5px 20px;
	  }
  </style>

Jika sudah save dan refresh pada browsernya, maka akan menghasilnya output seperti gambar di bawah ini

Selanjutnya kita akan memasang datepicker dengan cara

– berikan id pada form input dengan nama “datepicker”

– Kemudian kita berikan library (“jquery-ui.css“) (“jquery-1.10.2.js“) (“jquery-ui.js“)

http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css
http://code.jquery.com/jquery-1.10.2.js
http://code.jquery.com/ui/1.11.4/jquery-ui.js

Tambahkan link di atas ini persis seperti gambar di atas link

– Berikutnya kita panggil id pada form dan berikan fungsi seperti script di bawah ini

<script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
</script>

Jika sudah save dan refresh pada browsernya, maka datepicker dengan Jquery UI berhasil di buat.

Oke sekian saya rasa cukup sekian dulu di artikel kali ini tentang Cara Membuat DatePicker Sederhana Dengan jQuery UI, kita berjumpa lagi di tips dan trik berikutnya.

Terimakasih dan sampai jumpa.

Semoga bermanfaat 🙂

Cara Membuat DatePicker Sederhana Dengan jQuery UI

Kategori