Bootstrap 4 Advanced Components : Datetimepicker for Bootstrap 4 Daemonite

Bootstrap 4 Advanced Components : Datetimepicker plugin for Bootstrap 4 and Daemonite material UI

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/bootstrap-material-datetimepicker@6659d24c7d2a9c782dc2058dcf4267603934c863/css/bootstrap-material-datetimepicker-bs4.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.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/moment/moment@develop/min/moment-with-locales.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/djibe/bootstrap-material-datetimepicker@83a10c38ee94dd27fd946ea137af6667c65a738f/js/bootstrap-material-datetimepicker-bs4.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
  <div class="row my-4">
    <div class="col">
      <div class="jumbotron">
        <h1>Bootstrap Material DatePicker 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 Design)</p>
        <p>
          A datetime picker for Bootstrap,<br>a creation of
          <a href="https://github.com/T00rk/bootstrap-material-datetimepicker" target="_blank">T00rk</a>.<br>
        </p>
        <p>
          Complete Bootstrap 4.1 integration by djibe with universal styling.
        </p>
        <p class="lead">
          If you see this page unstyled, press Ctrl + F5 to reload it.
        </p>
        <h2>Setup</h2>
        <ol>
          <li class="mb-2">Add Material icons on top of your CSS dependencies<br>
            <code>&lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></code>
          </li>
         ...

CSS

:root {
  /* Set your primary color in rgb */
  --primary-color: 225, 190, 231;
}

JavaScript

$(function() {
  var $now = moment();
  var $dateMin = $now.subtract(3, 'days');


  $('#datetimepicker').bootstrapMaterialDatePicker({
    format: 'MM/DD/YYYY HH:mm',
    shortTime: false,
    //minDate: $dateMin,
    //maxDate: null,
    //currentDate: $now,
    //disabledDays: [],
    date: true,
    time: true,
    monthPicker: false,
    year: true,
    clearButton: false,
    nowButton: false,
    switchOnClick: true,
    cancelText: 'Cancel',
    //okText: 'VALIDER',
    //clearText: 'EFFACER',
    //nowText: 'MAINTENANT',
    //triggerEvent: 'focus',
    //lang: 'en',
    //weekStart: 1,
  });
  
  $('#datetimepicker-fr').bootstrapMaterialDatePicker({
    format: 'DD/MM/YYYY HH:mm',
    shortTime: false,
    clearButton: false,
    nowButton: false,
    cancelText: 'annuler',
    //okText: 'valider',
    //clearText: 'effacer',
    nowText: 'maintenant',
    lang: 'fr',
    weekStart: 1,
  });

  $('#timepicker').bootstrapMaterialDatePicker({
    format: 'HH:mm',
    shortTime: false,
    date: false,
    time: true,
    monthPicker: false,
    year: false,
    switchOnClick: true
  });

  $('#datepicker').bootstrapMaterialDatePicker({
    format: 'DD/MM/YYYY',
    shortTime: false,
    date: true,
    time: false,
    monthPicker: false,
    year: false,
    switchOnClick: true,
  });

  $('#monthpicker').bootstrapMaterialDatePicker({
    format: 'MM',
    shortTime: false,
    date: false,
    time: false,
    monthPicker: true,
    year: false
  });

  $('#yearpicker').bootstrapMaterialDatePicker({
    format: 'YYYY',
    shortTime: false,
    date: false,
    time: false,
    monthPicker: false,
    year: true,
    switchOnClick: true,
  });
});