Jumat, 28 Februari 2014

JQuery Time Picker untuk Memilih Tanggal dan Waktu Jam pada DateTimePicker di Halaman Web

JQuery Time Picker untuk Memilih Tanggal dan Waktu Jam pada DateTimePicker di Halaman Web
JQuery Time Picker untuk Memilih Tanggal dan Waktu Jam pada DateTimePicker di Halaman Web ini melengkapi artikel yang pernah penulis buat yaitu Menggunakan DateTimePicker dengan JQuery dengan Format Indonesia dan Memberikan Nilai Awal. Kebutuhan yang sering penulis alami kadang membutuhkan lebih dari DatePicker saja, yaitu membutuhkan Date dan TimePicker yaitu DatePicker yang mampu memilih Time (Waktu) sehingga hasilnya Tanggal dan Waktu.

Hal ini tentu saja tidak bisa dipenuhi dengan DateTimePicker bawaan JQuery, sehingga harus ditambahkan AddOn TimePicker JQuery.


Buatlah halaman Web misalnya dengan nama datetimepicker.html, kode programnya seperti berikut ini :

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" media="all" type="text/css" href="jquery-ui.css" />
<link rel="stylesheet" media="all" type="text/css" href="jquery-ui-timepicker-addon.css" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="jquery-ui-sliderAccess.js"></script>
  
  <script>
  // http://cariprogram.blogspot.com
  // nuramijaya@gmail.com

  $(document).ready(function() {
    //$("#datepicker").datepicker();
    //$("#datepicker").datepicker(
    //{
    //   dateFormat: 'dd/mm/yy',
    //   changeMonth: true,
    //   changeYear: true
    //defaultDate: '20/03/2010'
    // });
 
$('#datepicker').datetimepicker({
dateFormat: 'yy-mm-dd',
timeFormat: 'HH:mm:ss',
stepHour: 2,
stepMinute: 10,
stepSecond: 10
});
  });
  </script>
</head>
<body style="font-size:62.5%;">
  
Date: <input type="text" id="datepicker" name="datepicker" value=""></p>

</body>
</html>

Hasilnya ketika dijalankan adalah sebuah Text Box pada halaman Web yang ketika kita klik maka akan muncul DateTimePicker atau DatePicker dengan Fitur TimePicer di dalamnya seperti ini :

JQuery Time Picker untuk Memilih Tanggal dan Waktu Jam pada DateTimePicker di Halaman Web

Jika anda kesulitan memperoleh file-file library Javascript dan CSS yang digunakan pada kode program di atas, penulis pun sudah agak lupa dimana mendapatkannya, karena dari beberapa sumber terpisah.

Sebaiknya anda download saja project selengkapnya disini. Jika bingung cara download, silakan melihat caranya disini.

Semoga berguna ^_^






2 komentar: