Bootstrap 4 Advanced Components : Clockpicker plugin for Bootstrap 4 Daemonite

Bootstrap 4 Advanced Components : Clockpicker plugin enhenced

by djibe89

HTML

<link rel="stylesheet" href="https://daemonite.github.io/material/css/material.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/djibe/clockpicker@1d03466e3b5eebc9e7e1dc4afa47ff0d265e2f16/dist/bootstrap4-clockpicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.bundle.min.js"></script>
<script src="https://daemonite.github.io/material/js/material.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/djibe/clockpicker@6d385d49ed6cc7f58a0b23db3477f236e4c1cd3e/dist/bootstrap4-clockpicker.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,500i,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
  <div class="row my-5">
    <div class="col">
      <div class="jumbotron">
        <h1>Clockpicker plugin for Bootstrap 4 - Advanced Components with daemonite material UI</h1>
        <p class="lead">by djibe.</p>
        <p class="text-muted">(thx to BS4 + Daemonite Material UI + Clockpicker)</p>
        <p>
          A clock-style timepicker for Bootstrap (or jQuery),<br>a creation of
          <a href="https://weareoutman.github.io/clockpicker/" target="_blank">Weareoutman</a>.<br> Now maintained by me on my <a href="https://github.com/djibe/clockpicker/tree/gh-pages/dist" target="_blank">Github page</a>.
        </p>
        <p>
          Latest version : 0.2.2.
        </p>
        <p>
          Complete Bootstrap 4.1 integration by djibe with a new look.
        </p>
        <p class="lead">
          If you see this page unstyled, press Ctrl + F5 to reload it.
        </p>
        <h2>Setup</h2>
        <ol>
          <li>Download my fork from
            <a href="https://github.com/djibe/clockpicker/tree/gh-pages/dist" target="_blank">Github</a> (the files starting with bootstrap4).
          ...

CSS

:root {
  /* Just set your primary color in decimal RGB */
  --primary-color: 156, 39, 176;
}

JavaScript

$(function() {
  $('.clockpicker').clockpicker({
    'default': 'now',
    vibrate: true,
    placement: "top",
    align: "left",
    autoclose: false,
    twelvehour: true
  });
  $('.clockpicker2').clockpicker({
    'default': 'now',
    vibrate: true,
    placement: "top",
    align: "left",
    autoclose: true,
    twelvehour: false
  });
});