Membuat Datepicker
Datepicker adalah alat input yang digunakan untuk tanggal dengan bentuk box
dengan desain dalam bentuk kalender.
Membuat Datepicker ada beberapa cara :
1. Datepicker menggunakan Jquery
2. Datepicker Bootstrap
1. Datepicker menggunakan Jquery
2. Datepicker Bootstrap
Cara Membuat Datepicker Menggunakan Jquery
1. Masukkan code dibawah ini didalam <head> sintak HTML.
1. Masukkan code dibawah ini didalam <head> sintak HTML.
Code dibawah berfungsi untuk tampilan.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> | |
| <link rel="stylesheet" href="/resources/demos/style.css"> |
Code dibawah berfungsi untuk perintah.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://code.jquery.com/jquery-1.12.4.js"></script> | |
| <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> |
Untuk poin 1 dan 2 hanya memanggil secara otomatis.
Apabila koneksi internet tidak ada, Code tersebut tidak akan berfungsi.
3. Masukkan code dibawah ini didalam <head> sintak HTML.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| $( function() { | |
| $( "#datepicker" ).datepicker(); | |
| } ); | |
| </script> |
<p>Date: <input type="text" id="datepicker"></p>
Pada poin 3 didalam script sudah dibuat ID dengan nama "datepicker",
maka pada tampilan di poin 4, ID tersebut kita panggil.
Cara Membuat Datepicker Bootstrap
1. Masukkan code berikut pada gemfile.
gem 'bootstrap-datepicker-rails'
2. Lalu install gem tersebut pada dengan memasukkan code dibawah pada terminal.
bundle install
3. Masukkan code dibawah pada file app/assets/stylesheets/application.css
*= require bootstrap-datepicker
# kalau memakai bootstrap v3 pakai yang ini :
*= require bootstrap-datepicker3
4. Masukkan code dibawah pada file app/assets/javascripts/application.js
//= require bootstrap-datepicker
5. Masukkan code dibawah pada folder view didalam file yang akan memakai
datepicker.
Tidak ada komentar:
Posting Komentar