<p><strong>Membuat Datepicker Pada ;Bootstrap &#8211; ;</strong>Apa itu datepicker? Jika anda mungkin sudah terbiasa berkecimpung di dunia web design mungkin sudah tidak asing dengan istilah ;<em>datepicker ;</em>ini. Datepicker adalah suatu metode/cara penginputan tanggal melalui sebuah dialog ;yang di desain secara khusus untuk menginput tanggal. Manfaatnya dengan membuat datepicker adalah untuk memudahkan pengguna dalam memasukkan tanggal agar sesuai dengan format yang diinginkan. Tentunya anda tidak ingin pengguna memasukkan tanggal tidak sesuai dengan format yang ada di database, karena hal ini dapat menyebabkan error pada aplikasi anda.</p>
<p>Untuk membuat datepicker pada bootstrap, ada beberapa bahan yang diperlukan yaitu:</p>
<ol>
<li>Bootstrap</li>
<li>jQuery</li>
<li>datepicker</li>
</ol>
<p>Agar lebih memudahkan, silahkan download ketiga bahan tersebut melalui link berikut:</p>
<p><a href="http://adfoc.us/18713564671676" target="_blank" rel="noopener noreferrer">Download DatePicker</a></p>
<p>Untuk bisa membuat  ;datepicker pada bootstrap, sebaiknya anda lakukan installasi bootstrap terlebih dahulu. Baca: <a href="https://www.tutorialpedia.net/tutorial-cara-menggunakan-bootstrap-untuk-pemula/" target="_blank" rel="noopener noreferrer">Cara menggunakan bootstrap</a></p>
<p>Pada file DatePicker tersebut sudah terdapat 3 buah folder, yang mana masing-masing folder sudah memiliki bahan yang dibutuhkan.</p>
<p>Berikut ini adalah langkah-langkah membuat datepicker pada bootstrap <a href="https://www.tutorialpedia.net">untuk pemula</a>.</p>
<h3>Membuat Datepicker Pada Bootstrap</h3>
<p>Buat ;file latihan baru dengan nama ;<strong>latihan-datepicker.html</strong></p>
<p><a href="https://www.tutorialpedia.net/wp-content/uploads/2016/12/Screenshot_231.png"><img class="aligncenter size-full wp-image-2738" src="https://www.tutorialpedia.net/wp-content/uploads/2016/12/Screenshot_231.png" alt="membuat datepicker pada bootstrap" width="613" height="147"></a></p>
<p>Kode ;<strong>latihan-datepicker.html</strong></p>
<pre class="lang:default decode:true"><;!DOCTYPE html>; 
<;html>; 
<;head>; 
	<;title>;Latihan DatePicker | TutorialPedia.NET<;/title>; 
	<;link rel="shortcut icon" href="https://www.tutorialpedia.net/wp-content/uploads/2016/10/signature_icon_code4ward-2.ico" title="Favicon" />; 
 <;meta name="viewport" content="width=device-width, initial-scale=1.0">; 
 <;!-- Bootstrap -->; 
 <;link href="css/bootstrap.min.css" rel="stylesheet">; 
 <;link href="css/datepicker.css" rel="stylesheet">; 
 <;script type="text/javascript" src="js/jquery-1.10.2.min.js">;<;/script>; 
 
<;/head>; 
<;body>; 
 
<;center>;<;H1>;Membuat DatePicker Dengan Bootstrap<;/H1>;<;/center>; 
 
<;div class="row">; 
 <;div class="col-xs-7 col-xs-offset-3 col-sm-5 col-sm-offset-5 col-lg-5 col-lg-offset-5">; 
 <;div class="form-group" >; 
 <;div class="col-md-6">; 
	 <;div class="input-group date " data-date="" data-date-format="yyyy-mm-dd">; 
	 <;input class="form-control" type="text" name="tgl_regis" readonly="readonly">; 
	 <;span class="input-group-addon">;<;i class="glyphicon glyphicon-calendar">;<;/i>;<;/span>; 
 <;/div>; 
 <;/div>; 
 <;/div>; 
 <;/div>; 
 <;!-- /.col-lg-6 -->; 
<;/div>; 
<;!-- /.row -->; 
 
<;center>;<;h3>;More Tutorial on <;a href="https://www.tutorialpedia.net">;TutorialPedia.NET<;/a>;<;/h3>;<;/center>; 
 
 
 
 
 <;script src="js/bootstrap.min.js">;<;/script>; 
 <;script src="js/bootstrap-datepicker.js">;<;/script>; 
 <;script>; 
 $(".input-group.date").datepicker({autoclose: true, todayHighlight: true}); 
 <;/script>; 
<;/body>; 
<;/html>;</pre>
<p>Perhatikan pada kode</p>
<pre class="lang:default decode:true "><;div class="input-group date " data-date="" data-date-format="yyyy-mm-dd">; 
 <;input class="form-control" type="text" name="tgl_regis" readonly="readonly">; 
 <;span class="input-group-addon">;<;i class="glyphicon glyphicon-calendar">;<;/i>;<;/span>; 
<;/div>;</pre>
<p>Class input-grup date adalah selector yang digunakan untuk memanggil fungsi dari datepicker. yang ada pada kode berikut:</p>
<pre class="lang:default decode:true "> <;script>; 
 $(".input-group.date").datepicker({autoclose: true, todayHighlight: true}); 
 <;/script>;</pre>
<p>Sekarang coba running latihan-datepicker.html pada browser anda.<br />
<iframe width="100%" height="500" src="//jsfiddle.net/fikryans10/ngeLqes2/1/embedded/result,html,js/dark/" allowfullscreen="allowfullscreen" frameborder="0"></iframe></p>
<p>Jika berhasil maka akan tampil penampil tanggal (datepicker) ketika kitak mengklik icon calendar pada form input tersebut.</p>
<p>Demikian tutorial ;<strong>Membuat DatePicker Pada Bootstrap.</strong></p>
<p>Selamat mencoba</p>

Membuat Datepicker Pada Bootstrap
Recent Articles
Kumpulan DNS Gratis Tercepat!
DNS merupakan sebuah sistem yang bertugas menyimpan semua informasi data domain dalam jaringan. Dengan adanya DNS, domain atau hostname yang ada akan ditranslate dan...
Apa itu DNS ? Dan Fungsinya
Apa itu DNS? - DNS (Domain Name System) adalah sebuah sistem yang bertugas menyimpan semua informasi data domain dalam jaringan. Dengan adanya DNS, domain...
Apa itu OLT ? Serta Fungsinya Dalam Jaringan
Apa itu olt ? OLT (Optical Line Termination) adalah perangkat keras yang berfungsi sebagai titik akhir (end-point) dari layanan jaringan optik pasif (Passive Optical...
Template Voucher Untuk Mixradius
Template Voucher Untuk Mixradius - Pasti kalian bosen kan dengan template voucher default mixradius? tenang. kali ini saya akan memberikan template untuk voucher mixradius kamu agar...
Daftar Port Game Online Mikrotik Terbaru
Daftar port game online dibawah ini bisa digunakan untuk membuat rule agar koneksi ke game online tersebut bisa lancar, bisa juga untuk memisahkan antara...
Related Articles
2 Comments
Leave A Reply Cancel reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
terima kasih mas,
makasih tutorialnya