Dalam menciptakan sebuah web, kita kadang dituntut untuk dapat membuat user interface yang mudah untuk digunakan oleh user, contohnya seperti Popup Calendar. Yahoo menyediakan komponen-komponen yang dapat Anda integrasikan pada web yang Anda buat, yang dikenal dengan nama Yahoo User Interface (YUI). Salah satunya adalah Yahoo Calendar, yang digunakan untuk membuat Popup Calendar, seperti halnya Date Picker yang merupakan istilah dari beberapa bahasa pemrograman.
Dalam menciptakan sebuah web, kita kadang dituntut untuk dapat membuat user interface yang mudah untuk digunakan oleh user, contohnya seperti Popup Calendar. Yahoo menyediakan komponen-komponen yang dapat Anda integrasikan pada web yang Anda buat, yang dikenal dengan nama Yahoo User Interface (YUI). Salah satunya adalah Yahoo Calendar, yang digunakan untuk membuat Popup Calendar, seperti halnya Date Picker yang merupakan istilah dari beberapa bahasa pemrograman.
Dengan menggunakan komponen ini, kita sebagai pengembang web, dapat memberikan kemudahan kepada user dalam mengisikan field tanggal, yaitu hanya dengan memilih tanggal pada popup yang diberikan.
Berikut langkah-langkah dalam pembuatan Popup Calendar menggunakan YUI versi 2.2.2:
a. Siapkan pustaka YUI.
b. Buatlah sebuah halaman web, sebagai contoh Anda dapat melihat pada kode sumber berikut:
<!-- Created by Robertus Lilik Haryanto (lilik.haryanto@gmail.com) !-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>YUI Calendar</title>
<link rel="stylesheet" href="lib/calendar.css" type="text/css">
<link rel="stylesheet" href="lib/examples.css" type="text/css"><script type="text/javascript" src="lib/YAHOO.js"></script>
<script type="text/javascript" src="lib/event.js" ></script>
<script type="text/javascript" src="lib/calendar.js"></script>
<script>
var cal, calFilter;
function init() {
cal = new YAHOO.widget.Calendar2up("cal", "calContainer");
cal.setChildFunction("onSelect", setDate);
cal.title = "Expired Date";
cal.render();
this.link = document.getElementById('dateLink');
}
function showCalendar() {
cal.outerContainer.style.top = (link.offsetTop+link.offsetParent.offsetTop+link.height) + "px";
cal.outerContainer.style.left = (link.offsetLeft+link.offsetParent.offsetLeft-104) + "px";
cal.outerContainer.style.display = 'block';
}
function setDate() {
var dt = cal.getSelectedDates()[0];
var date = (dt.getDate() < 10) ? "0" + dt.getDate() : dt.getDate();
var month = (dt.getMonth() < 10) ? "0" + (dt.getMonth()+1) : (dt.getMonth()+1);
var year = dt.getYear();
if (date.length == 3) date = date.substr(1, 2);
if (month.length == 3) month = month.substr(1, 2);
if (navigator.appName.indexOf("Netscape") > -1) {
document.getElementById("txtDate").value = date + "/" + month + "/" + (year + 1900);
} else if (navigator.appName.indexOf("Internet Explorer") > -1) {
document.getElementById("txtDate").value = date + "/" + month + "/" + year;
cal.hide();
}
window.onload = function() {
init();
}
</script>
</head>
<body>
<h2>YUI Calendar, oleh Robertus Lilik Haryanto</h2>
<input type="text" name="txtDate" id="txtDate" size="10" maxlength="10" readonly="readonly" />
<a href="#" onclick="showCalendar()"><img id="dateLink" src="lib/pdate.gif" border="0" style="vertical-align:middle;margin:5px"/></a>
<input type="button" name="btnClearDate" id="btnClearDate" value="Reset" onClick="this.form.txtDate.value='';"/>
</body>
</html>
<span id="calContainer" style="position:absolute;display:none"></span>
c. Sesuaikan pustaka YUI yang telah Anda siapkan dengan path pada file html di atas (calendar.css, examples.css, YAHOO.js, event.js, calendar.js). Selain itu, sesuaikan pula file-file gambar pada file calendar.js.
d. Coba Anda jalankan web di atas.
e. Jika Anda mendapatkan tampilan seperti gambar di atas, Anda berarti telah berhasil membuat Popup Calendar ini.
f. Selamat mencoba, dan nikmatilah menggunakan komponen-komponen dari Yahoo User Interface lainnya.Untuk lebih memperdalam pengetahua mengenai Yahoo User Interface (YUI), Anda dapat membaca tutorial atau manual yang terdapat di http://developer.yahoo.co/yui/.
