Bootstrap datetimepicker select time view mode

Question

Hi I'm working with bootstrap datetimepicker. I'm trying to show select time view after choose date (click on date). Is there any events to open select time view or something else?

Answer 1

If you are using eonasdan datetimepicker you may use the following events:

• dpchange in order to test if the user changed the date
• click in order to reset the datetimepicker to the default condition (no time selection)

The snippet:

$('#datetimepicker1').datetimepicker().on('dp.change', function(e) {
  var currDate = e.date.format('DD/MM/YYYY');
  var oldDate = (e.oldDate == null) ? currDate : e.oldDate.format('DD/MM/YYYY');
  var sideBySide = $('#datetimepicker1').data("DateTimePicker").options().sideBySide;
  if (currDate != oldDate && sideBySide == false) {
    $('#datetimepicker1').data("DateTimePicker").sideBySide(true);
  }
}).on('click', 'span.input-group-addon', function(e) {
  $('#datetimepicker1').data("DateTimePicker").sideBySide(false);
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css">
<script src="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/js/bootstrap-datetimepicker.min.js"></script>


<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control"/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>