创建时自动显示 bootstrap-datetimepicker
Automatically show a bootstrap-datetimepicker on creation
我有一个 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'>×</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>
有没有更好的方法让它自动显示,然后在外面丢focus/click又自动关闭?
更新:当我的日期选择器位于 Bootstrap 模态弹出窗口中时,这似乎只是一个问题。请参阅更新的示例。
它有点老套,但似乎对我有用
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'>×</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();
});
您可以像 shown.bs.modal
那样使用 bootstrap modal events 在显示模式时显示日期时间选择器。
这是一个活生生的例子:
// 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'>×</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>
我有一个 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'>×</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>
有没有更好的方法让它自动显示,然后在外面丢focus/click又自动关闭?
更新:当我的日期选择器位于 Bootstrap 模态弹出窗口中时,这似乎只是一个问题。请参阅更新的示例。
它有点老套,但似乎对我有用
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'>×</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();
});
您可以像 shown.bs.modal
那样使用 bootstrap modal events 在显示模式时显示日期时间选择器。
这是一个活生生的例子:
// 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'>×</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>