Question

您好我正在使用bootstrap datetimepicker。我想在选择日期后点击选择时间视图（点击日期）。是否有任何事件可以打开选择时间视图或其他内容？

Answer 1

如果您使用eonasdan datetimepicker，则可以使用以下事件：

dpchange以测试用户是否更改了日期
click，以便将datetimepicker重置为默认条件（无时间选择）

摘录：

$('#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>

Bootstrap datetimepicker选择时间视图模式

1 个答案: