Pada artikel kali ini, gua mau coba sharing mengenai cara menggunakan jquery datetimepicker pada tag input HTML.
Ada beberapa mode penggunaan datetimepicker yang gua coba contohkan pada artikel ini. Untuk dokumentasi lengkapnya, bisa kalian lihat disini ya.
Oke, langsung aja bagaimana cara menggunakannya.
Pertama, load terlebih dahulu file css dan javascript yang akan digunakan pada tag head. Disini gua menggunakan bootstrap 4.4.1, fontawesome 4.7.0, jquery 3.3.1 dan datetime picker 2.4.4.
<head>
<title>Bootstrap Example</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- fontawesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- datetimepicker -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-datetime-picker@2.4.4/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-datetime-picker@2.4.4/css/bootstrap-datetimepicker.min.css">
</head>
Selanjutnya, kita implementasi tag input dan kode program datetimepicker sesuai case yang diinginkan. Berikut beberapa contoh implementasi kode program nya.
Berikut adalah kode program dasar untuk implementasi datetimepicker secara default.
<body>
<div class="container">
<h2>Implementasi Datetimepicker</h2>
<form>
<div class="form-group">
<label for="usr">Datetimepicker:</label>
<input type="text" class="form-control" id="tanggal" name="tanggal" autocomplete="off">
</div>
</form>
</div>
</body>
<script type="text/javascript">
$(function(){
$('#tanggal').datetimepicker({
autoclose: true,
fontAwesome: true
});
});
</script>
Keterangan parameter:
autoclose = Auto tutup datetimepicker setelah memilih tanggal dan waktu. Jika tidak inisialisasi parameter ini, maka value default nya false (tidak tutup datetimepicker otomatis setelah pilih tanggal dan waktu).
fontawesome = Berikan value true, jika ingin menggunakan library icon dari fontawesome. Default value false dan icon yang digunakan dari library glyphicons. Sebagai catatan, bootstrap 4 tidak lagi otomatis include glyphicons. Sebagai alternatif, maka dari itu menggunakan fontawesome.
Berikut adalah kode program untuk implementasi datetimepicker apabila kita ingin tag input datetimepicker hanya dapat memilih tanggal saja.
<div class="container">
<h2>Implementasi Datetimepicker</h2>
<form>
<div class="form-group">
<label for="usr">Hanya Date picker:</label>
<input type="text" class="form-control" id="tanggal2" name="tanggal2" autocomplete="off">
</div>
</form>
</div>
</body>
<script type="text/javascript">
$(function(){
$('#tanggal2').datetimepicker({
autoclose: true,
minView: 2,
format: "yyyy-mm-dd",
fontAwesome: true
});
});
</script>
Keterangan parameter:
minView = Adalah parameter untuk definisikan tampilan minimal datetimepicker. Default value minView adalah 0 (tampilan untuk pilih waktu). Dengan memberikan value angka 2, maka tampilan minimal yang akan ditampilkan adalah tanggal.
Silahkan kalian kulik kembali ya untuk lebih memahami parameter minView ini.
Kode program ini sangat cocok apabila kita ingin membatasi tanggal dan waktu yang dapat dipilih tidak boleh tanggal dan waktu yang sudah lewat dari saat ini.
<body>
<div class="container">
<h2>Implementasi Datetimepicker</h2>
<form>
<div class="form-group">
<label for="usr">Datetime picker, disable date dan time yang sudah lewat</label>
<input type="text" class="form-control" id="tanggal3" name="tanggal3" autocomplete="off">
</div>
</form>
</div>
</body>
<script type="text/javascript">
$(function(){
$('#tanggal3').datetimepicker({
autoclose: true,
startDate: new Date(),
format: "yyyy-mm-dd hh:ii:ss",
fontAwesome: true
});
});
</script>
Keterangan parameter:
startDate: Parameter untuk definisikan tanggal dan waktu awal yang dapat dipilih, dan akan disabled tanggal dan waktu sebelumnya. Pada parameter ini, kita berikan value berupa fungsi javascript new Date() yang mana akan generate tanggal dan waktu saat ini (saat kode program datetimepicker ini di load).
Implementasi mode ini sebenarnya mirip dengan contoh implementasi sebelumnya. Hanya saja, tanggal dan waktu yang di disabled akan berjalan secara realtime tanpa harus reload halaman website nya terlebih dahulu.
Sebagai contoh, kalian load halaman website yang ada datetimepicker ini pada waktu 16.03. Otomatis, pada saat itu kalian masih bisa memilih waktu yang dimulai dari 16.05. Tapi, ketika waktu sudah menunjukkan pukul 16.06, saat kalian mencoba memilih tanggal dan waktu kembali, maka kalian sudah tidak bisa memilih waktu 16.05 lagi.
Berikut kode progamnya nya. Yang membedakan dari contoh kode program sebelumnya, pada contoh kode program ini, pada intinya kita akan inisialisasi ulang parameter startDate setiap id tag input datetimepicker yang ingin diimplementasi, di klik.
<body>
<div class="container">
<h2>Implementasi Datetimepicker</h2>
<form>
<div class="form-group">
<label for="usr">Datetime picker, disable date dan time yang sudah lewat (realtime)</label>
<input type="text" class="form-control" id="tanggal4" name="tanggal4" autocomplete="off">
</div>
</form>
</div>
</body>
<script type="text/javascript">
$(function(){
$("#tanggal4").click( function () {
var date = new Date();
//inisialisasi ulang parameter setStartDate setiap tag input dengan id tanggal4 di klik
$("#tanggal4").datetimepicker('setStartDate', date);
});
$("#tanggal4").datetimepicker({
autoclose: true,
format: "yyyy-mm-dd hh:ii:ss",
startDate: new Date(),
fontAwesome: true
});
});
</script>
Implementasi Untuk Membatasi Hari Tertentu Supaya Tidak Bisa Dipilih
Kode program datetimepicker ini berfungsi untuk membatasi pilihan hari tertentu.
<body>
<div class="container">
<h2>Implementasi Datetimepicker</h2>
<form>
<div class="form-group">
<label for="usr">Disable hari tertentu supaya tidak bisa di pilih</label>
<input type="text" class="form-control" id="tanggal5" name="tanggal5" autocomplete="off">
</div>
</form>
</div>
</body>
<script type="text/javascript">
$(function(){
$('#tanggal5').datetimepicker({
autoclose: true,
startDate: new Date(),
format: "yyyy-mm-dd hh:ii:ss",
daysOfWeekDisabled: [0,6],
fontAwesome: true
});
});
</script>
Keterangan parameter:
daysOfWeekDisabled: Parameter untuk definisikan hari apa aja yang akan di-disabled supaya tidak bisa di pilih. Value yang diberikan dapat berupa angka 0-6 yang di masukan dalam bentuk variabel array. Jadi, jika value yang kita berikan pada parameter ini adalah [0,6], maka akan disabled hari Minggu dan Sabtu.
Oke, sekian sharing gua mengenai cara menggunakan library javascript datetimepicker. Semoga bermanfaat.
