#JQuery UI

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

By Diki Alfarabi Hadi
8 February 2016
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

<!DOCTYPE html>

<html>

<head>

<title>JQuery UI Part 2 : Membuat form inputan tanggal dengan jquery ui</title>

</head>

<body>

<h1>Membuat form inputan tanggal dengan jquery ui | www.malasngoding.com</h1>

</body>

$(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.

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.

$(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

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.

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.