2

我有一个datetimepicker，我想在它创建后立即自动打开它。我尝试show在创建后调用该方法，该方法有效，但之后不会关闭！

例如，我直观地期望当我在外部单击或失去焦点时小部件会关闭。

// Set up form widgets
$("#input_completed_at").datetimepicker({
  sideBySide: true
});

$("#input_completed_at").data("DateTimePicker").show();
.modal-open .modal.modal-allow-overflow {
  overflow: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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.14.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<div id="myModal" class='modal fade modal-allow-overflow' data-width="760">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class='modal-header'>
        <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
        <h4 class="modal-title">Pick a date!</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="input_completed_at">Task Completion Date</label>
          <div class="input-group date" id="input_completed_at">
            <input type="text" name="completed_at" class="form-control">
            <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

有没有更好的方法让它自动显示，但当它失去焦点/点击外部时自动关闭？

更新：当我的日期选择器位于 Bootstrap 模式弹出窗口中时，这似乎只是一个问题。请参阅更新的示例。

4

2 回答 2

3

您可以使用引导模式事件，例如shown.bs.modal在显示模式时显示 datetimepicker。

这里有一个活生生的例子：

// Set up form widgets
$("#input_completed_at").datetimepicker({
  sideBySide: true
});

$('#myModal').on('shown.bs.modal', function (e) {
  $("#input_completed_at").data("DateTimePicker").show();
});
.modal-open .modal.modal-allow-overflow {
  overflow: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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.14.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<div id="myModal" class='modal fade modal-allow-overflow' data-width="760">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class='modal-header'>
        <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
        <h4 class="modal-title">Pick a date!</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="input_completed_at">Task Completion Date</label>
          <div class="input-group date" id="input_completed_at">
            <input type="text" name="completed_at" class="form-control">
            <span class="input-group-addon">
              <span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

于 2016-09-02T08:41:51.607 回答
0

这有点hacky，但似乎对我有用

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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.14.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">   Launch demo modal </button>

<div id="myModal" class='modal fade modal-allow-overflow' data-width="760">   <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class='modal-header'>
        <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
        <h4 class="modal-title">Pick a date!</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="input_completed_at">Task Completion Date</label>
          <div class="input-group date" id="input_completed_at">
            <input type="text" name="completed_at" class="form-control">
            <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
        </div>
      </div>
    </div>   </div> </div>

JS

// Set up form widgets
$("#input_completed_at").datetimepicker({
  sideBySide: true
});

$("#input_completed_at").data("DateTimePicker").show();
$( ".modal-header" ).click(function() {
  $("#input_completed_at").data("DateTimePicker").hide();
});

$( "#input_completed_at" ).click(function() {
  $("#input_completed_at").data("DateTimePicker").toggle();
});

编辑 如果您希望它在模态初始化时打开，您可以将单击绑定到按钮

$( ".btn" ).click(function() {
  $("#input_completed_at").data("DateTimePicker").show();
});

密码笔

于 2016-09-02T06:05:03.910 回答