Cara Membuat Form Input Tanggal Mengunakan Plugin Datepicker

Example blog post alt

Bootstrap | 2018-11-25

Apa itu Datepicker?
Datepicker adalah sebuah program javascript berbentuk seperti kalender yang dapat dipasang di form HTML untuk menginput atau memasukkan tanggal dengan valid dan sesuai dengan format yang diinginkan.

Berikut ini kita akan mencoba membuat form input tanggal dengan mengunakan plugin datepicker bootstrap :

#Step1

  1. Download plugin datepicker.
  2. Extract download datepicker kedalam folder yang telah kita buat di dalam htdocs.

#Step2

Buat script di bawah ini dan simpan dengan nama index.php.

<html>
<head>
	<title>Bootstrap</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/bootstrap.css">
	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="datepicker/bootstrap-datepicker.js"></script>
	<link rel="stylesheet" href="datepicker/datepicker.css">
	<script>
		$(function () {
		$('#datepicker').datepicker({
		autoclose: true
	});
	});
	</script>
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-sm-4">
		<h2 class="page-header">Form Input Tanggal</h2>
			<form>
				<div class="form-group">
					<label>Tanggal</label><br>
					<input type="text" id="datepicker" class="form-control" placeholder="Tanggal"><br>
					
					<button class="btn btn-danger" type="submit">Simpan</button>
				</div>	
			</form>
		</div>	
	</div>	
</div>
</body>
</html>

Berikut hasil dari script yang telah di buat :

Selamat Mencoba !!

Download Aplikasi