JavaScript + HTML : Calendar picker

Memang menjadi masalah kalau bermain dengan masa. Paling asas ialah untuk petik tarikh. Kongsep HCI ialah untuk memudahkan pengguna. Jadi kalendar perlulah ada untuk memudahkan pengguna memilih tarikh. HTML5 ada fungsi ini. Tapi buat masa sekarang, peluncur / browser kebanyakkan masih belum aktif menggunakan HTML5. Javasript adalah alternative terbaik.

1. Download fail javascript dan gambar berkaitan :

http://www.rainforestnet.com/datetimepicker/download/sample.zip

2. Unpack dan masukkan pada folder halaman anda.

3. Link javascript tersebut dengan fail anda

<script src="datetimepicker_css.js"></script>

* (rujuk kod sumber contoh dalam folder yang korang unpack tadi kalau tak faham)

4. Melalui form tertentu. Invoke fungsi javascript melalui teknik onclick(), sebagai contoh:

<input type="Text" name="mulacuti" id="mulacuti" maxlength="25" size="25"/>
<img src="images/cal.gif" onclick="javascript:NewCssCal ('mulacuti','ddMMyyyy','','','','','future')" style="cursor:pointer"/>

Nota: pastikan ID pada input anda adalah sama dengan parameter di dalam NewCssCal. Untuk contoh di atas, ID = mulacuti dan parameter = mulacuti. Kalau tak sama, memang tak menjadilah jawabnya beb..

Terdapat pelbagai cara untuk anda manipulasikan masa dan tarikh. Sila rujuk:

http://www.rainforestnet.com/datetimepicker/datetimepicker-demo1.htm