Bootstrap 4 Advanced Components : Datetimepicker for Bootstrap 4 Daemonite

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

by pj_js15

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">
        

        <label>Time + Date + Month + Year picker</label>
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text"><i class="material-icons">event</i></span>
          </div>
          <input class="form-control" id="datetimepicker11" type="text" placeholder="Choose time">
        </div>
        
      </div>
      
      
      <div class="form-group">
  <div class="floating-label">
    <label for="exampleFloatingLabel3">Select</label>
    <select class="form-control" id="exampleFloatingLabel3">
      <option label=" "></option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </div>
</div>



<div class="form-group">
        <div class="form-group with-floating-label">
          <div class="floating-label">
            <label...

JavaScript

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


//$('#exampleFloatingLabel3 option[value=1]').prop('selected', true).trigger('change');

$('#exampleFloatingLabel4 option[value=VIC]').prop('selected', true).trigger('change');


  $('#datetimepicker11').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,
  });
});