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 :
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 ^_^
time nya angka genap ya.. angka ganjil gabisa
BalasHapusBantu jawab..tinggal ganti stephour nya aja jadi 1
Hapus