JQuery UI Part 2 : Membuat Form Inputan Tanggal Dengan JQuery UI

Membuat Form Inputan tanggal Dengan JQuery UI – Sebelum nya di www.malasngoding.com saya sudah membahas tentang pengertian dan cara menggunakan JQuery UI. dan pada tutorial jquery UI part 2 ini saya akan menjelaskan sebuah fungsi fitur dari jquery ui yang sudah di sediakan oleh jquery ui untuk memudahkan kita dalam membuat form inputan berbentuk tanggal. yaitu fungsi datepicker() dari jquery ui. dengan adanya form inputan tanggal ini kita dapat dengan mudah membuat form input tanggal dengan mudah. kita tidak perlu lagi mengetikkan tanggal dengan manual pada form. dan tidak perlu lagi menggunakan tag <option> HTML untuk membuat inputan tanggal, bulan dan tahun. karena dengan fungsi datepiker() jquery ui ini kita dapat membuat form input tanggal dengan mudah. sama seperti membuat form input tanggal dengan atribut type=”date” yang tersedia pada html5.
1 |
<input type="date"> |
Membuat Form Inputan Tanggal Dengan JQuery UI
langsung saja kita mulai membuat form inputan tanggal sederhana dengan jquery ui. cara nya hubungkan dulu file jquery dan jquery ui nya. kalo belum download library nya download dulu. atau kalo teman-teman mau pakai file cdn yang sudah di sediakan bisa juga. di sini saya sudah mendownload file library jquery dan jquery ui nya dan saya letakkan pada directory contoh membuat form inputan tanggal dengan jquery ui ini. untuk contoh saya akan membuat form inputan tanggal pada file datepicker.html.
datepicker.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <title>JQuery UI Part 2 : Membuat form inputan tanggal dengan jquery ui</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="js/jquery-ui/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Membuat form inputan tanggal dengan jquery ui | www.malasngoding.com</h1> <input type="text" class="input-tanggal"> </body> <script type="text/javascript"> $(document).ready(function(){ $('.input-tanggal').datepicker(); }); </script> </html> |
dapat di liha pada contoh di atas. kita hubungkan dulu dengan jquery dan jquery-ui. jangan lupa css jquery-ui nya juga.
1 2 3 4 |
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="js/jquery-ui/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="style.css"> |
kemudian membuat form inputan biasa dengan memberikan class atau id terserah teman-teman. di sini saya memberikan class dengan nama ‘input-tanggal’.
1 |
<input type="text" class="input-tanggal"> |
dan terakhir kita membuat inputan tanggal dengan jquery ui dengan menggunakan fungsi datepicker() yang telah di sediakan oleh jquery ui untuk membuat form inputan tanggal.
1 2 3 |
$(document).ready(function(){ $('.input-tanggal').datepicker(); }); |
untuk css di bawah ini opsional. teman-teman bisa menggunakan nya juga atau tidak. saya cuma iseng menambahkan css juga.
style.css
1 2 3 4 5 6 7 8 9 10 11 12 |
body{ font-family: sans-serif; } h1{ text-align: center; } .input-tanggal{ padding: 10px; font-size: 14pt; } |
dan hasilnya

Membuat form inputan tanggal dengan jquery ui
dan datepicker pun siap di gunakan untuk membuat form input tanggal. tampilan tanggal di atas merupakan tampilan standar dari jquery ui. teman-teman bisa merubah tampilan jquery ui nya dengan menyesuaikan sesuai dengan keinginan masing-masing di website jquery.ui.
See the Pen membuat form inputan tanggal dengan fungsi datepicker jquery ui by Malas Ngoding (@malasngoding) on CodePen.0
note : teman-teman bisa mengatur format penulisan tanggal nya dengan menambahkan beberapa opsi pada fungsi datepicker. bisa di lihat di sini.
Tutorial Menarik Lainnya

JQuery UI Part 15 : Interaksi Selectable dan Sortable di JQuery UI

JQuery UI Part 14 : Membuat Resizable Dengan JQuery UI

JQuery Part 13 : Membuat Interaksi Droppable Dengan JQuery UI
