Jika kita sering melihat atau pernah mengisi sebuah form dengan format tanggal yang jika diklik akan muncul sebuah tanggal dan kita tinggal memilih tanggal yang diinginkan untuk mengisi sebuah form itu yang sering disebut datepicker. Pada kesempatan kali ini saya akan mencoba menshare bagaimana cara mengaplikasikan datepicker pada form yang akan kita buat.
sebelum itu anda bisa mengunjungi
https://almsaeedstudio.com untuk mendowload template adminLTE yang sering saya gunakan untuk membuat program aplikasi, dalam template tersebut sudah ada file jquery untuk datepicker.
setelah didownload silahkan masukkan diserver lokal yang digunakan, kemudian ketik baris kode dibawah seperti dibawah untuk membuat viewnya, dalam contoh yang saya gunakan menggunakan framework codeigniter jadi teman-teman bisa menyesuaikannya.
<head>
<title>Date Picker</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="<?php echo base_url();?>asset/bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- bootstrap datepicker -->
<link rel="stylesheet" href="<?php echo base_url();?>asset/plugins/datepicker/datepicker3.css">
<!-- Theme style -->
<link rel="stylesheet" href="<?php echo base_url();?>asset/dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="<?php echo base_url();?>asset/dist/css/skins/_all-skins.min.css">
</head>
Setelah itu buat formnya, copykan kode dibawah ini, perlu perhatian untuk form input jangan lupa untuk dikasih id="datepicker"
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" id="datepicker">
<!-- /.input group -->
</div>
<!-- /.form group -->
Kemudian include file javascript yang diperlukan, berikut file yang diperlukan
<script src="<?php echo base_url();?>asset/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="<?php echo base_url();?>asset/bootstrap/js/bootstrap.min.js"></script>
<!-- bootstrap datepicker -->
<script src="<?php echo base_url();?>asset/plugins/datepicker/bootstrap-datepicker.js"></script>
untuk file directorinya disesuaikan dengan direktori yang ada diserver lokal yang digunakan. selanjtunya tambhakan kode javascript dibawah ini.
<script>
$(function () {
//Initialize Select2 Elements
$(".select2").select2();
//Datemask dd/mm/yyyy
$("#datemask").inputmask("dd/mm/yyyy", {"placeholder": "dd/mm/yyyy"});
//Datemask2 mm/dd/yyyy
$("#datemask2").inputmask("mm/dd/yyyy", {"placeholder": "mm/dd/yyyy"});
//Money Euro
$("[data-mask]").inputmask();
//Date range picker
$('#reservation').daterangepicker();
//Date range picker with time picker
$('#reservationtime').daterangepicker({timePicker: true, timePickerIncrement: 30, format: 'MM/DD/YYYY h:mm A'});
//Date range as a button
$('#daterange-btn').daterangepicker(
{
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
startDate: moment().subtract(29, 'days'),
endDate: moment()
},
function (start, end) {
$('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
);
//Date picker
$('#datepicker').datepicker({
autoclose: true
});
//iCheck for checkbox and radio inputs
$('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
checkboxClass: 'icheckbox_minimal-blue',
radioClass: 'iradio_minimal-blue'
});
//Red color scheme for iCheck
$('input[type="checkbox"].minimal-red, input[type="radio"].minimal-red').iCheck({
checkboxClass: 'icheckbox_minimal-red',
radioClass: 'iradio_minimal-red'
});
//Flat red color scheme for iCheck
$('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
checkboxClass: 'icheckbox_flat-green',
radioClass: 'iradio_flat-green'
});
//Colorpicker
$(".my-colorpicker1").colorpicker();
//color picker with addon
$(".my-colorpicker2").colorpicker();
//Timepicker
$(".timepicker").timepicker({
showInputs: false
});
});
</script>
Jika tidak ada error tampilan yang muncul adalah seperti dibawah ini. jika form date kita klik akan muncul sebuah tanggal yang bisa kita pilih untuk input kolom date.
