Menambahkan Plugin Datepicker pada input tanggal sebuah form

Untuk menambahkan plugin datepicker ini, perlu menambahkan sebuah CSS dan Jquery. Dan untuk itu silahkan buka root_directory/po-content/theme/themeactive/index.php

Tambahkan baris kode pemanggil css berikut sebelum tag head penutup:

<!-- Datepicker -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"></link>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/css/bootstrap-datetimepicker.min.css" rel="stylesheet"></link>

Tambahkan pemanggilan Jquery berikut diatas tag body penutup:

<!-- Datepicker -->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
 $(function () {
  $('#datetimepicker').datetimepicker({
   format: 'DD MMMM YYYY HH:mm',
  });
  
  $('#datepicker').datetimepicker({
   format: 'DD MMMM YYYY',
  });
  
  $('#timepicker').datetimepicker({
   format: 'HH:mm'
  });
 });
</script>

Diatas bidang input tanggal pada form yang dimaksudkan tambahkan kode berikut:

<div class='input-group date' id='datepicker'>

Dibawah bidang input tanggal pada form yang dimaksudkan tambahkan kode berikut:

    <span class="input-group-addon">
	<span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

Sehingga secara keseluruhan form/ bidang input tanggal menjadi seperti berikut:

<?=$this->layout('index');?>

<div class="container">
	<div class="row">
		<div class="col-md-12">
			<?=htmlspecialchars_decode($this->e($alertmsg));?>
			<form name="form-pendaftaran" action="<?=BASE_URL;?>/pendaftaran" method="post">
			    <div class="col-sm-4">
				    <div class="form-group">
					    <label for="nama">Nama</label>
					    <input type="text" name="nama" class="form-control" id="nama" value="<?=(isset($_POST['nama']) ? $_POST['nama'] : '');?>" placeholder="Nama" />
				    </div>
				</div>
			    <div class="col-sm-4">
				<div class="form-group">
					<label for="alamat">Alamat</label>
					<input type="text" name="alamat" class="form-control" id="alamat" value="<?=(isset($_POST['alamat']) ? $_POST['alamat'] : '');?>" placeholder="Alamat" />
				</div>
				</div>
			    <div class="col-sm-4">
				<div class="form-group">
					<label for="jeniskelamin">Jeniskelamin</label>
					<input type="text" name="jeniskelamin" class="form-control" id="jeniskelamin" value="<?=(isset($_POST['jeniskelamin']) ? $_POST['jeniskelamin'] : '');?>" placeholder="Jeniskelamin" />
				</div>
				</div>
			    <div class="col-sm-4">
				<div class="form-group">
					<label for="tempatlahir">Tempatlahir</label>
					<input type="text" name="tempatlahir" class="form-control" id="tempatlahir" value="<?=(isset($_POST['tempatlahir']) ? $_POST['tempatlahir'] : '');?>" placeholder="Tempatlahir" />
				</div>
				</div>
			    <div class="col-sm-4">
				<div class="form-group">
					<label for="tanggallahir">Tanggallahir</label>
					<div class='input-group date' id='datepicker'>
						<input type="text" name="tanggallahir" class="form-control" id="tanggallahir" value="<?=(isset($_POST['tanggallahir']) ? $_POST['tanggallahir'] : '');?>" placeholder="Tanggallahir" />
						<span class="input-group-addon">
							<span class="glyphicon glyphicon-calendar"></span>
						</span>
					</div>
				</div>
				</div>
			    <div class="col-sm-4">
				<div class="form-group">
					<label for="email">Email</label>
					<input type="text" name="email" class="form-control" id="email" value="<?=(isset($_POST['email']) ? $_POST['email'] : '');?>" placeholder="Email" />
				</div>
				</div>
			    <div class="col-sm-4">
				<div class="form-group">
					<label for="phone">Phone</label>
					<input type="text" name="phone" class="form-control" id="phone" value="<?=(isset($_POST['phone']) ? $_POST['phone'] : '');?>" placeholder="Phone" />
				</div>
				</div>
			    <div class="col-sm-4">
				<div class="form-group">
					<label for="kotaasal">Kotaasal</label>
					<input type="text" name="kotaasal" class="form-control" id="kotaasal" value="<?=(isset($_POST['kotaasal']) ? $_POST['kotaasal'] : '');?>" placeholder="Kotaasal" />
				</div>
				</div>
			    <div class="col-sm-4">
				<div class="form-group">
					<label for="active">Active</label>
					<select name="active" class="form-control" id="active">
						<option value="Active">Active</option>
						<option value="No">No</option>
					</select>
				</div>
				</div>
			    <div class="col-sm-4">
				<button type="submit" class="btn btn-success">Submit</button>
			    </div>
			</form>
		</div>
	</div>
</div>

Silahkan simpan perubahan yang baru saja dibuat, lalu kunjugi http://nama-website/pendaftaran dan lihat pada bidang tanggal.

~ Semoga dapat membantu dan sukses ~