Membuat timepicker menggunakan JQuery-ui

Membuat timepicker menggunakan Jquery sangat mudah. Tetapi jika lama tidak dicoba untuk membuatnya terkadang hal kecil seperti membuat timepicker sering terlupa. Saya menulis ini bertujuan untuk mengisi kekosongan waktu yang banyak ini agar tidak membosankan. Selain itu jika suatu saat saya lupa untuk membuat timepicker saya akan membuka blog saya sendiri ini. Banyak tutorial di internet yang membahas tentang menggunakan time picker. Karena saking banyaknya malah membuat bingung untuk memilih. Salah satunya menggunakan timepicker menggunakan bootstrap. Tetapi yang saya gunakan saat ini tidak menggunakan bootstrap karena saya coba dan tidak berhasil. Saya menggunakan jquery biasa yang memanfaatkan beberapa plugin. Plugin-plugin yang saya gunakan sudah saya siapkan beserta file index.html dan images yang sudah siap dijalankan, filenya dapat di download disini.

1. Membuat folder time_picker
2.dalam folder tersebut diisi dengan file css dan js

• jquery-1.9.0.min.js
• jquery-ui-timepicker-addon.css
• jquery-ui-timepicker-addon.js
• jquery-ui.css
• jquery-ui.min.js

3. membuat folder image didalam time_picker untuk menyimpan image yang akan digunakan

• ui-bg_flat_75_ffffff_40x100.png
• ui-bg_glass_55_fbf9ee_1x400.png
• ui-bg_glass_65_ffffff_1x400.png
• ui-bg_glass_75_dadada_1x400.png
• ui-bg_glass_75_e6e6e6_1x400.png
• ui-bg_highlight-soft_75_cccccc_1x100.png
• ui-icons_222222_256x240.png

4. membuat file index.html untuk membuat form input waktu yang menggunakan time_picker

<script type="text/javascript" src="jquery-1.9.0.min.js"></script>

<script type="text/javascript" src="jquery-ui.min.js"></script>

<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>

<link rel="stylesheet" media="all" type="text/css" href="jquery-ui-timepicker-addon.css"/>

<link rel="stylesheet" media="all" type="text/css" href="jquery-ui.css"/>

<div class="example-container">

<p>Format the time:</p>

    <div>

    <input type="text" name="basic_example_3" id="basic_example_3" value="" />

</div>



<script>

    $(document).ready(function(){

        $('#basic_example_3').timepicker();

    });

</script>