DateTime Pickerrrrs

by Kyle Falconer

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css">
<div class='input-group date' data-date-time="datepicker1">
  <input type="text" class="form-control" />
  <span class="input-group-addon">
          <i class="fa fa-clock-o" aria-hidden="true"></i>
      </span>
</div>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

JavaScript

function initDesktopPicker(el) {
  picker = $(el).datetimepicker({
    // allowInputToggle: true,
    defaultDate: new Date(),
    // focusOnShow: false,
    // ignoreReadonly: true,
    //format: (is_mobile ? 'LT' : false), // TODO: make it true if on mobile
    widgetPositioning: {
      horizontal: 'right'
    }
  }).on('dp.hide', function(e) {
    // when the datetimepicker is closed, update models with current dates and emit event
    e.stopPropagation()
    $('#main').off('mouseup')
    //var time = picker.setTime(e.date)
    //view.emit('active', 'days', time.day)
    //view.emit('active', time.endOrStartTime, time.hour)
  }).on('dp.show', function(e) {
    // if a touch/click is detected outside of the datetime picker, close it.
    // window.setTimeout(function () {
    //  $('#main').on('mouseup', function (e) {
    //    var container = $('.bootstrap-datetimepicker-widget ul')
    //    var is_open = container.is(':visible')
    //    if (!is_open) {
    //      return
    //    }
    //    if (!container.is(e.target) // if the target of the click isn't the container...
    //      && container.has(e.target).length === 0) // ... nor a descendant of the container
    //    {
    //      picker.find('.input-group-addon').click(); // lulz, wut? at least it works.
    //    }
    //  })
    // }, 90)
  })
  return picker;
}

initDesktopPicker($('.input-group.date'))