Salah satu alternatif untuk menggunakan interface datepicker dengan gaya Bootstrap 3 adalah menggunakan library yang namanya Bootstrap 3 Datepicker. Silakan simak di http://eonasdan.github.io/bootstrap-datetimepicker/.

Bagaimana menginstalnya?

  1. Acquire jQuery
  2. Acquire Moment.js
  3. Bootstrap 3 collapse and transition plugins

Make sure to include *.JS files for plugins collapse and transitions. They are included with bootstrap in js/ directory Alternatively you could include the whole bundle of bootstrap plugins from bootstrap.js

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/moment.js"></script>
<script type="text/javascript" src="/path/to/bootstrap/js/transition.js"></script>
<script type="text/javascript" src="/path/to/bootstrap/js/collapse.js"></script>
<script type="text/javascript" src="/path/to/bootstrap/dist/bootstrap.min.js"></script>
<script type="text/javascript" src="/path/to/bootstrap-datetimepicker.min.js"></script>

CSS styles

Using LESS

@import "/path/to/bootstrap/less/variables";
@import "/path/to/bootstrap-datetimepicker/src/less/bootstrap-datetimepicker-build.less";

// [...] your custom styles and variables

Using CSS (default color palette)

<link rel="stylesheet" href="/path/to/bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
Advertisements