Bootstrap datetimepicker

Bootstrap 4 + jquery + datetimepicker

by Reflexecute

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<!doctype html>

<html lang="en">

  <head>
    <meta charset="utf-8">

    <title>Datetimepicker error</title>
    <meta name="description" content="Bootstrap 4 datetimepicker error">
    <meta name="author" content="Reflexecute">
  </head>

  <body>
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-8">
          <div class="card">
            <div class="card-header">
              Wrong
            </div>
            <div class="card-body">
              <div class="form-group">
                <span class="label"><i class="fa fa-calendar"></i> Date time picker</span>
                <input type="text" name="date-time-picker" id="picker1" class="form-control date-time-picker">
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header">
              Sidebyside workaround
            </div>
            <div class="card-body">
              <div class="form-group">
                <span class="label"><i class="fa fa-calendar"></i> Date time picker</span>
                <input type="text" name="date-time-picker" id="picker2" class="form-control date-time-picker">
             ...

JavaScript

$(function() {
  $('input.date-time-picker#picker1').datetimepicker({
    format: 'YYYY-MM-DD HH:mm',
    icons: {
      clear: 'fa fa-trash fa-fw',
      close: 'fa fa-times fa-fw',
      date: 'fa fa-calendar fa-fw',
      down: 'fa fa-chevron-down fa-fw',
      next: 'fa fa-chevron-right fa-fw',
      previous: 'fa fa-chevron-left fa-fw',
      time: 'fa fa-clock-o fa-fw',
      up: 'fa fa-chevron-up fa-fw',
      today: 'fa fa-calendar-times-o fa-fw'
    },
    /* sideBySide: true, */
    showClear: true,
    showClose: true,
    showTodayButton: true,
  });

  $('input.date-time-picker#picker2').datetimepicker({
    format: 'YYYY-MM-DD HH:mm',
    icons: {
      clear: 'fa fa-trash fa-fw',
      close: 'fa fa-times fa-fw',
      date: 'fa fa-calendar fa-fw',
      down: 'fa fa-chevron-down fa-fw',
      next: 'fa fa-chevron-right fa-fw',
      previous: 'fa fa-chevron-left fa-fw',
      time: 'fa fa-clock-o fa-fw',
      up: 'fa fa-chevron-up fa-fw',
      today: 'fa fa-calendar-times-o fa-fw'
    },
    sideBySide: true,
  });
});