Cara Membuat Datepicker dengan jQuery

Cara Membuat Datepicker dengan jQuery

Cara Membuat Datepicker dengan jQuery – Selamat datang kembali pada blog.kristiandes.com Site Blogging And Learning . Pada kesempatan ini kita akan belajar Bagaimana Membuat Form Datepicker Dengan JQuery UI . Mari kita pahami terlebih dahulu mengenai pengertian jquery hingga penerapannya terhadap form input tangal datepicker.

Pengertian Jquery

jQuery adalah pustaka JavaScript lintas-platform yang didesain untuk menyederhanakan client-side scripting pada HTML.

sumber : https://id.wikipedia.org/wiki/JQuery

Didalam sebuah form inputan, ada bebarapa jenis type inputan baik type text maupun yang lainnya. Disini kita akan mencoba menerapkan fungsi Jquery untuk membantu kita melakukan seleksi berdasarkan tanggal, bulan dan tahun.

Disuatu kondisi form inputan tanggal ini sangat berfungsi dalam melakukan seleksi data kedepannya, dimana data yang akan kita select merupakan big data, jika tidak melakukan seleksi sebelumnya maka proses nya pun akan membutuhkan waktu yang sangat lama, bahkan mungkin terjadi kegagalan.

Mari simak bagaimana penerapan Membuat Form Datepicker Dengan JQuery UI

Penerapannya

Create file datepicker.php

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function(){
$("#datepicker").datepicker({ dateFormat: 'yy-mm-dd' });
});
</script>
Filter Date : <input name="today" id="datepicker" placeholder="yyyy-mm-dd" required />

Sampai disini, Bro sis sudah bisa menjalankannya dengan hasil yang sudah pasti berjalan dengan baik. Saya sedikit terangkan ya dari script di atas.

Baris Pertama

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

ini adalah css / tampilan datepicker nya, Saya disini menggunakan jqueryui versi 1.11.4. Jika ada pembaharuan teman-teman bisa mengubahnya sendiri.

Baris Kedua & Ketiga

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

ini adalah Script / library datepicker nya, Saya disini menggunakan jquery versi 1.11.3 dan jqueryui versi 1.11.4. Jika ada pembaharuan teman-teman bisa mengubahnya sendiri.

Baris Keempat

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

Nah ini adalah baris penentu bagaimana format date itu, disini saya menggunakan format yy-mm-dd (tahun-bulan-tanggal). Format ini bisa saja teman-teman ganti dengan kebutuhan masing-masing ya.

Baris Kelima

Filter Date : <input name="today" id="datepicker" placeholder="yyyy-mm-dd" required />

Pada baris ini adalah bagian menampilkannya cukup dengan id=”datepicker” sesuaikan dengan penamaan di javascript baris keempat ya.

Nah jika script ini dijalankan akan seperti ini :

Sampai disini tahapan Cara Membuat Form Inputan Tanggal Dengan JQuery sudah selesai. Pada artikel selanjutnya Saya akan membuat tutorial tentang seleksi dengan query mysql dan datepicker. Kita akan kolaborasikan ya teman-teman pada sesi artikel Saya selanjutnya.

Demikian ulasan mengenai Cara Membuat Form Inputan Tanggal Dengan JQuery. Tetap semangat untuk menulis, dan berikan ilmu kepada Siapa saja ya. Sekian dari Saya semoga bermanfaat.