Integrasikan Web Anda dengan Yahoo User Interface (YUI) Calendar


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.Calendare. 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/.

2 thoughts on “Integrasikan Web Anda dengan Yahoo User Interface (YUI) Calendar

  1. ada yg pernah coba bikin report dimana nampilin tanggal, hari dan tahun dalam bulan yg berjalan tampil secara vertikal?

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s