Bootstrap datetimepicker with hh:mm:ss format

Question

I am working on an application, and I'm a little stuck on the datetimepicker. The datepicker should be able to show a data format of yyyy-mm-dd hh:mm:ss (year, month and date with current hour, minutes and seconds...). It's working fine, but after when i select the date the datepicker has to autoclose or hide. But it's not going off. I tried a lot with different scripts, still not able to work. Following is the HTML:

<span>Select time with Date</span>
    <div class='input-group date' id='datetimepicker2'>
      <input type='text' class="form-control" id='datetimepicker2' />
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
      </span>

Following is the JS:

    <script type="text/javascript">
        $(function() {

  $('#datetimepicker2').datetimepicker({
       format: 'YYYY-MM-DD HH:mm:ss',
    autoclose: true 
  });
  });
    </script>

I guess the script is not supporting autoclose call. Any idea how I can fix this?

palaѕн palaѕн · Accepted Answer · 2020-04-24T15:08:41

You can just listen to the datetimepicker dp.change event and force closing the datetimepicker when the date is changed like:

$(function() {
  $('#datetimepicker2').datetimepicker({
    format: 'YYYY-MM-DD HH:mm:ss'
  });

  // Hide datetimepicker on date change
  $("#datetimepicker2").on("dp.change", function() {
    $(this).data("DateTimePicker").hide();
  });

  // Show datetimepicker on input text click
  $('#datetimepicker2 > input').on('click', function() {
    $(this).closest('.date').data('DateTimePicker').show();
  });
});

Bootstrap datetimepicker with hh:mm:ss format

1 Answers