Calendar Picker

Mengembangkan aplikasi di Web memang banyak seninya. Tidak segampang mengembangkan aplikasi berbasis windows, dimana semua control tersedia dan tinggal di “colok-dan-mainkan (baca: plug-and-play)”.

Salah satu yang sering ditemui adalah kalau kita punya sebuah Field di Domino bertype Date-Time. Domino secara default hanya memberikan interface input text saja. Bagaimana kalau user salah input, bagaimana dengan format calendar yang bisa “mm-dd-yyyy” ato “dd-mm-yyyy” ato lainnya.

Salah satu Calendar control yang bagus dan free (kalo butuh yang lebih advanced bisa beli versi commercial-nya) dan menjadi favorit saya adalah DHTML Calendar Widget, dari www.dynarch.com.

Gimana Cara nempelin ke Domino?

1. Download JSCalendar dari web-site diatas.
2. Ekstrak ke directory c:/lotus/domino/data/domino/html/jscalendar-1.0
3. rename “…/jscalendar-1.0” menjadi “../jscalendar” saja (biar gampang)
4. Siap digunakan

Nah, berikut scriptnya di Domino Form:

Misalkan kita punya dua buah field yang akan di tempel calendar picker. Misalkan lagi fieldnya kita kasih nama “StartDate” dan “EndDate”

HTML Head Content

“<style type=\”text/css\”>@import url(/jscalendar/calendar-blue.css);</style>” + @NewLine +
“<script type=\”text/javascript\” src=\”/jscalendar/calendar.js\”></script>” + @NewLine +
“<script type=\”text/javascript\” src=\”/jscalendar/lang/calendar-en.js\”></script>” + @NewLine +
“<script type=\”text/javascript\” src=\”/jscalendar/calendar-setup.js\”></script>” + @NewLine

Tambahkan script contoh dibawah ini ke Form (taruh aja di paling bawah)

<script type=”text/javascript”>
Calendar.setup({
inputField : “StartDate”,
ifFormat : “%d/%m/%Y”,
showsTime : false
});
Calendar.setup({
inputField : “EndDate”,
ifFormat : “%d/%m/%Y”,
showsTime : false
});
</script>

perhatikan “ifFormat : “%d/%m/%Y” yang artinya akan menghasilkan nilai “06/08/2006” untuk tanggal “06 Agustus 2006”.

Mudah bukan 🙂

Yani Dama Putera
Codephile
yanidp@yahoo.com