Hallo teman teman balik lagi dengan saya Ismet Maulana kali ini saya ingin berbagi pengetahuan tentang Cara Membuat Datepicker dengan Bootstrap, teman teman pasti pernah melihat sebuah website dengan form input ketika masuk pada field tanggal makan ketika klik kursor ke halaman input tersebut akan keluar sebuah kalender, kita tinggal pilih tanggal berapa kita akan pilih tidak lagi kita menulisnya
dengan manual, oke singkat cerita seperti itu saya akan ajarkan keteman teman, oke langsung saja siapkan text editornya masing masing kemudian teman teman bisa salinkan scriptnya dibawah sini : sambungkan terlebih dahulu ke jQuery bootstrap. teman teman bisa download yah dibootstrapnya :
<meta charset="utf-8"> <meta name="viewport"content="width=device-width, initial-scale=1"> <link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet"href="datepicker.css"type="text/css"> <!--LoadjQueryandbootstrapdatepickerscripts-->
<script src="js/jquery-1.9.1.min.js"></script> <script src="js/bootstrap-datepicker.js"></script> <script
type="text/javascript"> kemudian tambahkan script ini :
Bootstrap datepicker merupakan sebuah JavaScript yang mampu memberikan antar muka berupa tanggal kepada pengguna saat mengisi data pada form input yang dideklarasikan khusus untuk memasukan data tanggal. Dulu ketika masih primitif Saya memasukan tanggal secara manual, namun bila menggunakan date picker, kita hanya cukup klik – klik saja interface kalender yang ditampilkan date picker bootstrap. Sebenarnya banyak jenis date picker untuk input tanggal, namun bila framework/gaya yang kita gunakan adalah bootstrap maka mungkin untuk input tanggalnya lebih cocok juga menggunakan bootstrap date picker, alasanya sederhana yaitu biar seragam saja. Lihat juga :
Bootstrap Datepicker ini membutuhkan Javascript atau Jquery, nah bila Anda menggunakan Bootstrap maka tentunya sudah ada paket Jquery didalamnya, jadi hanya perlu memanggilnya.
Format tanggal diatas dibuat yyyy-mm-dd mengikuti format yang berlaku pada database, karena database secara default database untuk tanggal akan disimpan dengan format seperti itu, Anda bisa saja merubah inputnya sesuai dengan format tanggal indonesia dd-mm-yyyy, hanya saja nanti saat input di proses, maka script PHP perlu merubahnya terebih dahulu menjadi format tanggal yang sesuai dengan database yaitu yyyy-mm-dd, bila tidak maka data
tanggal tidak akan tersimpan ke database, oleh karena itu pada date picker diatas mungkin lebih baik jika format tanggalnya disesuaikan saja dengan format tanggal database. Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simpel |