Membuat Input Kalender dengan Javascript


Kadang didalam sebuah form terdapat bagian untuk memasukan tanggal, ada yang berupa kumpulan combo untuk tanggal, bulan, dan tahun. Ada juga yang langsung input tanggal sesuai format yang telah di tentukan. Namun untuk nilai estetika sebuah tampilan halaman web yang anda buat, tidak ada salahnya jika anda mencoba tampilan input tanggal dengan menampilkan sebuah kalender dengan javascript.

Tujuan artikel ini membantu anda dalam membuat sebuah halaman form yang terdapat input kalender. 

Code

http://www.4shared.com/file/JaU32FP5/Input-kalender.html

Rekomendasi

https://ri32.wordpress.com/2010/10/01/membuat-aplikasi-web-menggunakan-kalender-javascript/

File-file yang anda butuhkan :

  1. calendarDateInput.js adalah inti programnya.
  2. kalender-input.php adalah tampilan form sekaligus untuk memanggil fungsi kalender <script>DateInput(‘today’, true)</script>
  3. kalender-view.php adalah untuk memproses data yang diinput, misalnya anda akan memasukanya kedalam sebuah database. Terlebih dahulu panggil nilai tanggal yang ada di dalam form tadi $tanggal=$_POST[‘today’];

Catatan :

Kenapa kita harus memanggil nilai tanggal yang ada di kalender dengan fungsi POST? Karena dalam aplikasi tersebut nilai kalender dimasukan kedalam input type=hidden dengan nama/name variable nya adalah “today”.

File yang saya modif :

Ada file yang saya modif, karena berhubungan dengan gambar kalender yang digunakan. Yaitu di file calendarDateInput.js

adapun cara penggunaannya adalah, jika web anda masih offline, gunakan link ini :

//yang saya ubah link nya

var ImageURL = ‘./images/calendarIcon.jpg’;

var NextURL = ‘./images/calendarNext.gif’;

var PrevURL = ‘./images/calendarPrev.gif’;


sedangkan jika anda sudah online, maka bisa langsung nge link gambar ke situs aslinya.

/* link asli

var ImageURL = ‘http://images.moonscript.com/icons/calendarIcon.jpg&#8217;;

var NextURL = ‘http://images.moonscript.com/icons/calendarNext.gif&#8217;;

var PrevURL = ‘http://images.moonscript.com/icons/calendarPrev.gif&#8217;;

*/

Sedangkan untuk referensi nya bisa anda lihat di situs http://calendar.moonscript.com/dateinput.cfm. Sekian tutorial dari saya, semoga bermanfaat  : )

Depok, 22-04-2010

noname

Advertisements

17 Responses

  1. Mau tanya.. ini kan kalo pas form input data..
    nah, yang saya bingung pada form edit data. Kan data tanggalnya kita ambil dari database, kemudian cara untuk mengesetnya di formnya gimana supaya sama???

    makasih sebelumnya.. lagi sangat bingung sekali soalnya..

    Like

  2. thank y….brguna bget…
    sukses slalu…

    Like

    • alhamdulilah ^_^
      sama2…senang bisa membantu anda.

      Like

  3. maturnuwon mas. Atas infonya tak coba dulu

    Like

  4. klo seandainya jika di inputkan tanggal..agar masuk ke database..pakai fungsi apa yah? mohon penjelasannya

    Like

  5. mungkin bisa baca ini, semoga anda mengerti 🙂

    ri32.wordpress.com/2010/11/23/membuat-web-absensi-online-dengan-php-dan-mysql/

    Like

  6. nice tutorial mas bro ….

    tp ada permsalahan ni ..gmn untuk coding edit tanggalnya…. tlg pncerahan….

    Like

  7. Agar bisa Edit tanggal yang sudah di simpan di database, saya rekomendasikan temen2 untuk membaca artikel ini :

    https://ri32.wordpress.com/2010/10/01/membuat-aplikasi-web-menggunakan-kalender-javascript/

    semoga bermanfaat..aamin 🙂

    Like

  8. Nice info mas. berguna banget buat saya 🙂

    Like

    • alhamdulilah 🙂

      Like

  9. terima kasih banyak pak…izin sedot source…

    Like

  10. Terima kasih banyak gan.
    ini proses TA.

    thx gan, sangat membantu.

    bro ada YM atau no hp bro, kalau mau tanya-tanya lebih detail…

    Like

  11. Kalo untuk java ada yang harus dirubah gag sih?

    Saya ikutin tutorial ini form tanggalnya muncul, tapi kok pas mw klik icon kalendernya gag keluar kalendernya yah??

    Mohon bantuannya

    Like

  12. https://ri32.wordpress.com/2010/10/01/membuat-aplikasi-web-menggunakan-kalender-javascript/

    Like

  13. mo nanya..d database..tglx jd date aja ??

    Like

    • iya. varchar juga bisa.

      Like

  14. mas bikin arsip dengan script php gimana terus tiap tahun bisa dibuka dan ada nilai jumlah didalamnya, seperti diblogger/wordpress tapi ini buat sendiri dasar pembuatan posts archive dengan script php tolong bantu saya serta pencerahannya dan kalu bisa beritahu saya diemail yakuzasamurai99@yahoo.com

    Like

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

%d bloggers like this: