Salah satu fitur yang dapat dibuat dengan jquery adalah Date Picker yang dapat kita gunakan untuk menampilkan tanggal pada sebuah field form.

Terlebih dahulu download jqueryUI disini dan ekstrak di root folder anda.

Tambahkan script untuk memanggil file css dan javascript.

 

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

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

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

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

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

 

<script type=”text/javascript”>                               

        $(function(){

                                   $(“#datepicker1”).datepicker();

                                   $(“#datepicker2”).datepicker();

        });                           

    </script>

 

Date picker ditampilkan berdasarkan id yang sudah ditentukan dalam function.

Dari script di atas dapat kita lihat dalam function yang bertuliskan #datepicker1 dan #datepicker2.

Maka date picker akan ditampilkan pada field yang diberikan id=”datepicker” dan id=”datepicker2″

Tidak ada pembatasan dalam menampilkan date picker, tinggal menyesuaikan id field dengan function yang dibuat.

 

Mudah bukan?

Klik disini untuk melihat demo.

 

Untuk informasi selengkapnya dapat dilihat di website JqueryUI

 

Kunjungi www.proweb.co.id untuk menambah wawasan anda.

 

JQuery Date Picker