Menambahkan Plugin Datepicker pada input tanggal sebuah form

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="https://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="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://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 https://nama-website/pendaftaran dan lihat pada bidang tanggal.

~ Update Penggunaan Datepicker ~