Selamat datang di blog Mari belajar coding. Pada tutorial kali ini kita akan belajar membuat sebuah inputan tanggal dengan Datepicker. Datepicker merupakan plugin jquery untuk menampilkan kalendar interaktif yang dapat mempermudah kita untuk input tanggal dengan format date maupun datetime. Kita bisa menggunakan plugin datepicker ini pada sebuah form inputan tanggal lahir dan sebagainya.
Membuat Form Input Tanggal dengan Datepicker
Disini saya akan memberikan dua contoh plugin datepicker yang dapat di terapkan di aplikasi web teman-teman, pertama Datepicker JQuery UI dan yang kedua Datepicker Bootstrap.
Datepicker JQuery UI
Untuk memasang plugin Datepicker JQuery UI, teman-teman perlu memanggil komponen css dan class jquerynya dengan mendownload plugin datepicker jquery ui atau bisa langsung mengakses melalui CDN dengan script dibawah ini kemudian letakkan di dalam tag head.
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Buat fungsi untuk menerapkan datepicker pada inputan form dengan javascript.
<script>
$( function() {
$( "#date" ).datepicker();
} );
</script>
#date diatas merupakan isi dari attribute id pada form input. Lihat kode dibawah ini.
<label >Date:</label>
<input type="text" id="date">
Untuk format atau option datepicker jquery ui seperti penampilan tanggal (yyyy-mm-dd) dan sebagainya, teman-teman bisa membaca dokumentasinya di sini. api.jqueryui.com/datepicker.
Contoh untuk menampilkan tanggal dengan format yyyy-mm-dd.
Contoh untuk menampilkan tanggal dengan format yyyy-mm-dd.
<script>
$( function() {
$( "#date" ).datepicker({
dateFormat: "yy-mm-dd"
});
} );
</script>
Kode lengkap membuat form input dengan datepicker jquery ui seperti dibawah ini. Simpan dengan nama file latihan1.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>maribelajarcoding.com</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#date" ).datepicker({
dateFormat: "yy-mm-dd"
});
} );
</script>
</head>
<body>
<label >Date:</label>
<input type="text" id="date">
</body>
</html>
Datepicker Bootstrap
Datepicker Bootstrap merupakan plugin tambahan untuk framework bootstrap. Fungsinya sama dengan datepicker jquery ui, yaitu untuk menampilkan popup kalendar interaktif.
Download plugin datepicker bootstrap terlebih dahulu di sini. bootstrap-datepicker.
Setelah download selesai, silahkan ekstrak hasil download tadi kemudian pindahkan folder bootstrap-datepicker kedalam folder xampp/htdocs.
Panggil komponen css dan jquerynya dengan menambahkan kode dibawah ini didalam tag head.
Download plugin datepicker bootstrap terlebih dahulu di sini. bootstrap-datepicker.
Setelah download selesai, silahkan ekstrak hasil download tadi kemudian pindahkan folder bootstrap-datepicker kedalam folder xampp/htdocs.
Panggil komponen css dan jquerynya dengan menambahkan kode dibawah ini didalam tag head.
<!-- framework bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!-- datepicker bootstrap -->
<link rel="stylesheet" href="bootstrap-datepicker/css/bootstrap-datepicker.min.css">
<script src="bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<script src="bootstrap-datepicker/locales/bootstrap-datepicker.id.min.js"></script>
Untuk menerapkan datepicker bootstrap di dalam form input, caranya sama dengan datepicker jquery ui dengan membuat fungsi javascript.
<script>
$( function() {
$( "#date" ).datepicker();
} );
</script>
#date merupakan isi dari attribute id pada form input.
Teman-teman bisa membaca dokumentasinya untuk mengubah format atau option datepicker bootstrap disini bootstrap-datepicker.readthedocs.io. Contoh sederhana format tanggal pada datepicker bootstrap.
Teman-teman bisa membaca dokumentasinya untuk mengubah format atau option datepicker bootstrap disini bootstrap-datepicker.readthedocs.io. Contoh sederhana format tanggal pada datepicker bootstrap.
<script>
$( function() {
$( "#date" ).datepicker({
autoclose:true,
todayHighlight:true,
format:'yyyy-mm-dd',
language: 'id'
});
} );
</script>
Kode lengkap membuat form input dengan datepicker bootstrap. Simpan dengan nama file latihan2.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>maribelajarcoding.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- framework bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!-- datepicker bootstrap -->
<link rel="stylesheet" href="bootstrap-datepicker/css/bootstrap-datepicker.min.css">
<script src="bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<script src="bootstrap-datepicker/locales/bootstrap-datepicker.id.min.js"></script>
<script>
$( function() {
$( "#date" ).datepicker({
autoclose:true,
todayHighlight:true,
format:'yyyy-mm-dd',
language: 'id'
});
} );
</script>
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<label class="control-label col-sm-1" >Date:</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="date">
</div>
</div>
</form>
</div>
</body>
</html>
Tutorial membuat form input tanggal dengan datepicker telah selesai. Sekian, semoga bermanfaat.
Baca juga Membuat Format Hari Tanggal Indonesia dengan PHP
Related Search:
Membuat Form Input Tanggal dengan Datepicker
Membuat Form Inputan Tanggal dengan JQuery UI
Membuat Form Input Tanggal dengan PHP
Form Input Tanggal Lahir PHP
Baca juga Membuat Format Hari Tanggal Indonesia dengan PHP
Related Search:
Membuat Form Input Tanggal dengan Datepicker
Membuat Form Inputan Tanggal dengan JQuery UI
Membuat Form Input Tanggal dengan PHP
Form Input Tanggal Lahir PHP