Fahmi Basya Kartapura On December - 29 - 2009

Datepicker

digunakan untuk mengambil data tanggal dari calendar.

sebelum bekerja dengan datepicker JQuery UI  maka kamu :

-Harus mendownload filenya terlebih dahulu dari http://jqueryui.com/download

-Pilih themenya (disini saya pakai theme UI Lightness) setelah itu klik tombol download.

-Setelah filenya didownload,  lalu lakukan langkah berikut:

  1. Kamu harus membuat folder js dan css didalam direktori document root webmu.
  2. extract file yang telah didownload didirektori sembarang.
  3. lalu masuk ke folder development-bundle dan ambil file jquery-1.5.1js dan masukkan ke folder  js webmu.
  4. Ambil folder ui dari folder development-bundle dan masukkan ke folder js webmu
  5. Ambil file jquery.ui.all.css, jquery.ui.base.css, jquery.ui.theme.css dan jquery.ui.datepicker.css dari direktori development-bundle/themes/ui-lightness ke folder css webmu.
  6. ambil folder images dari direktori development-bundle/themes/ui-lightness lalu masukkan ke dalam direktori css webmu.

Mengambil data tanggal dengan format default

Defaul format tanggal dari datetimepicker adalah mm/dd/yy,  seperti gambar dibawah ini:

Pertanyaan:

Bagaimana membuat textbox yang akan menampilkan kalender seperti gambar di atas … ?

<html>

<head>

<link type=”text/css” href=”<?php echo base_url();?>css/ui.all.css” rel=”stylesheet” />
<link type=”text/css” href=”<?php echo base_url();?>css/ui.datepicker.css” rel=”stylesheet” />

<link type=”text/css” href=”css/jquery.ui.all.css” rel=”stylesheet” />

<link type=”text/css” href=”css/jquery.ui.datepicker.css” rel=”stylesheet” />

<script type=”text/javascript” src=”js/jquery-1.5.1.js”></script>

<script type=”text/javascript” src=”js/jquery.ui.core.js”></script>

<script type=”text/javascript” src=”js/jquery.ui.datepicker.js”></script>

<script type="text/javascript">

$(function() {

$("#tanggal").datepicker();

});

</script>

</head>

<body>

<input id=”tanggal” type=”text”></p>

</body>

</html>

Keterangan:

  • fungsi $(“#tanggal”).datepicker(); berarti JQuery mencari elemen yang mempunyai id=tanggal dan memberikannya fungsi datepicker.

Memforat Tanggal dengan Custom Format

Saya ingin memberikan format tanggal ’2011-06-02′ yaitu tahun-bulan-hari.

Untuk membuatnya maka kita hanya menggunakan fungsi dateFormat seperti dibawah ini:

$(function() {

$(“#tanggal”).datepicker({dateFormat: ‘yy-mm-dd’});

});

Memformat dengan tanggalan Indonesia

Untuk memformat tanggal datepicker menjadi kalender Indonesia kita harus memasukkan file jquery.ui.datepicker-id.js ke dalam kode kita yang akan menghasilkan gambar seperti dibawah ini:

Keterangan:

  • Untuk tanggalan format indonesia maka format tanggalnya adalah dd/mm/yy.

Pertanyaan:

Bagaimana cara membuatnya … ?

Jawaban:

<html>

<head>

<link type=”text/css” href=”<?php echo base_url();?>css/ui.all.css” rel=”stylesheet” />
<link type=”text/css” href=”<?php echo base_url();?>css/ui.datepicker.css” rel=”stylesheet” />

<link type=”text/css” href=”css/jquery.ui.all.css” rel=”stylesheet” />

<link type=”text/css” href=”css/jquery.ui.datepicker.css” rel=”stylesheet” />

<script type=”text/javascript” src=”js/jquery-1.5.1.js”></script>

<script type=”text/javascript” src=”js/ui/jquery.ui.core.js”></script>

<script type=”text/javascript” src=”js/ui/jquery.ui.datepicker.js”></script>

<script type=”text/javascript” src=”js/ui/i18n/jqury.ui.datepicker-id.js”></script>

<script type="text/javascript">

$(function() {

$(‘#tanggal’).datepicker($.datepicker.regional['id']);

});

</script>

</head>

<body>

<input id=”tanggal” type=”text”></p>

</body>

</html>

Keterangan:

Untuk memformat datepicker ke tanggalan Indonesia maka kita harus :

  1. Memasukkan  <script type=”text/javascript” src=”js/ui/i18n/jquery.ui.datepicker-id.js”></script> diantara tag <head> dan </head>.
  2. Memasukkan fungsi $.datepicker.regional['id'] kedalam parameter datepicker menjadi datepicker($.datepicker.regional['id']);

Menampilkan tampilan lebih dari satu calendar

Pertanyaan:

Bagaimana menampilkannya … ?

Jawaban:

Untuk menampilkan kalender lebih dari satu yaitu dengan memberi angka yang diinginkan pada numberOfMonths, seperti berikut ini:

$(‘.tanggal’).datepicker({

numberOfMonths: 2

});

Lalu muncul pertanyaan-> bagaimana agar kalender muncul lebih dari satu dan berformat indonesia … ?

Jawaban:

Untuk membuatnya kita bisa menggunakan kode seperti berikut ini:

$.datepicker.setDefaults($.datepicker.regional['id']);

$(‘#tanggal’).datepicker({

numberOfMonths: 2

});

Mentrigger Datepicker dengan tombol Gambar dan Teks

Pada tutorial di atas, untuk memunculkan tanggal maka kita harus mengklik textbox-nya dan terkadang ini sangat membosankan dan membuat kesal klien dikarenakan apabila klien ingin merubah tanggal pada textbox-nya secara manual maka gambar tanggal tersebut selalu muncul dan menutupinya. Untuk itu sebaiknya kita gunakan tombol pemicu dengan tombol gambar ataupun teks.

1. Pemicu dengan Tombol Gambar

Untuk memicunya dengan tombol gambar, kurang lebih gambarnya seperti ini:

Seperti gambar di atas tombol gambar pemicunya berada disebelah kanan textbox. Lalu bagaimana membuatnya … ?

Untuk membuatnya kita hanya tambahkan opsi berikut ini:

  1. buttonImage  yang berisi path dari gambar
  2. buttonImageOnly yang berisi string ‘true’
  3. showOn yang berisi string  ‘button’

Copy file calendar.gif dari direktori development-bundle/demos/images ke dalam folder imagemu.

Lalu pembuatan kodenya seperti dibawah ini:

$(‘#tanggal’).datepicker({
buttonImage:’images/calendar.gif’,
buttonImageOnly: true,
showOn: ‘button’

})

2. Pemicu dengan Tombol Teks

Untuk membuatnya kita hanya tambahkan opsi berikut ini:

  1. showOn yang berisi string ‘button’
  2. buttonText yang berisi string ‘Pilih’

$(‘#tanggal’).datepicker({
showOn: ‘button’,

buttonText:’Pilih’

})

Jika Tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura’.



Categories: jQuery

7 Responses

  1. rifka says:

    Assalaamu’alaikum..
    sebelumnya mohon maaf,
    saya tertarkhi dengan script datepicker nya. jadi, saya print. dari kemaren, saya gak bisa2 bikin format tanggal. susah banget. maklum, baru belajar bikin web. kebetuln pake’ php. itu script nya bisa kan di pake’ di php ? trus, nanti di tampilannya, hasilnya apa format indonesia ya ?? terima kasih sebelumnya…

  2. Deddy says:

    Nice info gan, sangat bermanfaat
    keep post bro…
    thx

  3. gaara says:

    tengkyu tengkyu tengkyu

  4. dany says:

    coba masukaan data tanggal nya ke database mySQL bisa gak… punya saya gak tampil ke database…ada yang bisa share datepicker ke mysql

  5. Fahmi Basya Kartapura says:

    Kamu pakai tipe apa kolomnya di MySQL, kalo pakai tipe date maka kamu harus setting format datepicker sesuai dengan format date di MySQL.

  6. tika says:

    makasih ya mas fahmi…mau ngopi boleeh??? buat PA nii..

  7. riri says:

    Terima Kasih Fahmi Basya Kartapura

Copy Protected by Chetans WP-Copyprotect.