tutorial cara memasang datepicker dengan jquery ui.

Hai? teman-teman yang telah lama terjun pada dunia website pasti telah sering menggunakan jquery, nah pada tutorial sebelumnya juga saya telah membahas banyak fungsi dan event jquery, pada tutorial kali ini saya akan mengajarkan bagaimana cara memasang datepicker dengan jquery ui.

jquery ui adalah sebuah kebangan atau library updetan dari jquery dimana banyak animasi-animasi yang dapat kita gunakan didalam library jquery ui ini, dan datepicker adalah sebuah plugin untuk menyisipkan kalender pada halaman website kita, nah pada tutorial kali ini saya akan mengajarkan bagaimana cara menyisipkan datepicker dengan jquery ui.

Oke sebelum kita praktekkan, silahakan download terlebih dahulu library jquery ui, lalu teman-teman buat sebuah file dan coba teman-teman ketikan script berikut ini :

<!DOCTYPE html>
<html>
<head>
  <title>belajar jquery ui</title>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"?></script>
  <script src="jquery-ui-1.12.1.custom/jquery-ui.js" type="text/javascript"?></script>
  <link href="jquery-ui-1.12.1.custom/jquery-ui.css" type="text/css" rel="stylesheet" />
  
      <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );

</script>

</head>
<body>
<p>tanggal: <input type="text" id="datepicker"></p>
</div>
 
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>belajar jquery ui</title>

$( function() {

$( "#datepicker" ).datepicker();

} );

</script>

</head>

<body>

<p>tanggal: <input type="text" id="datepicker"></p>

</div>

</body>

</html>

Step pertama ialah saya menghubungkan file-file yang diperlukan untuk menjalankan fungsi datepickernya,

<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"?></script>
  <script src="jquery-ui-1.12.1.custom/jquery-ui.js" type="text/javascript"?></script>
  <link href="jquery-ui-1.12.1.custom/jquery-ui.css" type="text/css" rel="stylesheet" />

Lalu saya membuat sebuah div untuk menampilkan datepickernya :

<p>tanggal: <input type="text" id="datepicker"></p>

1	<p>tanggal: <input type="text" id="datepicker"></p>

Dan saya membuat script untuk menjalankan datepickernya :

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

</script>

$( function() {

$( "#datepicker" ).datepicker();

} );

</script>

jika teman-teman save maka hasilnya akan seperti berikut ini :

sangat mudah ya teman-teman? dengan library ini kita dapat membuat fungsi memilih tanggal dengan lebih menarik,

Oke teman-teman untuk tutorial kali ini tentang bagaimana cara memasang datepicker dengan jquery ui cukup sampai disini dulu, sampai bertemu pada tutorila berikutnya, semoga tutorial yang singkat ini bermanfaat untuk teman-teman semuanya,

terimakasih .

Cara Memasang Datepicker Dengan Jquery Ui

Facebook DUMET School

Categories