Bootstrap 模式模式下的日期时间选择器未出现
Bootstrap datetime picker in Modal mode not appearing
我正在尝试在模态视图中实现 bootstrap 的日期时间选择器,例如下面的屏幕截图:
我的代码如下:
HTML:
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="H3">Add New Overtime</h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class='input-group date' id='ot_date'>
<input type='text' class="form-control datepicker" placeholder="Enter OT Date" />
<span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span>
</div>
</div>
<div class="form-group">
<div class='input-group date' id='ot_timein'>
<input type='text' class="form-control" placeholder="Enter OT Time-in"/>
<span class="input-group-addon"> <span class="glyphicon glyphicon-time"></span> </span>
</div>
</div>
<div class="form-group">
<div class='input-group date' id='ot_timeout'>
<input type='text' class="form-control" placeholder="Enter OT Time-out" />
<span class="input-group-addon"> <span class="glyphicon glyphicon-time"></span> </span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="submit" class="btn btn-primary">
Save
</button>
</div>
</div>
JS:
<script type="text/javascript">
$(document).ready(function() {
$('#ot_date').datetimepicker();
$('#ot_timein').datetimepicker({
language: 'en',
pick12HourFormat: true
});
$('#ot_timeout').datetimepicker({
language: 'en',
pick12HourFormat: true
});
});
我已经检查了以下链接,但仍然没有明确的答案。
Query1 - DateTime picker in bootstrap is not working
Query 2 - Twitter bootstrap datetime-picker not showing properly in modal
Query 3 - Bootstrap datetime-picker showing in modal as partial
您要为此元素初始化选择器:$('#ot_date').datetimepicker()。
但它是一个 'div' 元素,而不是输入。尝试将您的 HTML 更改为:
<div class="form-group">
<div class='input-group date'>
<input type='text' class="form-control datepicker" id="ot_date" placeholder="Enter OT Date" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
首先,非常感谢 @Guruprasad Rao 让我知道我的代码中缺少什么。我在控制台中发现在调用 bootstrap-datetimepicker.js 之前首先需要 Moment.js。所以你可以下载the Moment.js from here.
在我的代码中,我实现了,如下:
<script src="<?php echo base_url(); ?>assets/bootstrap/plugins/datetimepicker/js/moment.js"></script>
<script src="<?php echo base_url(); ?>assets/bootstrap/plugins/datetimepicker/js/bootstrap-datetimepicker.js"></script>
提醒: Moment.js 必须先调用 datetimepicker.js
其次,非常感谢@Melvas。我向你们致敬。感谢您更正我的代码。如您所说,ID="ot_date" 添加到输入元素中,而不是 DIV。脑洞大...
所以实施我上面提到的两个更改,我得到了下面的截图。
日历现在按预期工作。
我正在尝试在模态视图中实现 bootstrap 的日期时间选择器,例如下面的屏幕截图:
我的代码如下:
HTML:
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="H3">Add New Overtime</h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class='input-group date' id='ot_date'>
<input type='text' class="form-control datepicker" placeholder="Enter OT Date" />
<span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span>
</div>
</div>
<div class="form-group">
<div class='input-group date' id='ot_timein'>
<input type='text' class="form-control" placeholder="Enter OT Time-in"/>
<span class="input-group-addon"> <span class="glyphicon glyphicon-time"></span> </span>
</div>
</div>
<div class="form-group">
<div class='input-group date' id='ot_timeout'>
<input type='text' class="form-control" placeholder="Enter OT Time-out" />
<span class="input-group-addon"> <span class="glyphicon glyphicon-time"></span> </span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="submit" class="btn btn-primary">
Save
</button>
</div>
</div>
JS:
<script type="text/javascript">
$(document).ready(function() {
$('#ot_date').datetimepicker();
$('#ot_timein').datetimepicker({
language: 'en',
pick12HourFormat: true
});
$('#ot_timeout').datetimepicker({
language: 'en',
pick12HourFormat: true
});
});
我已经检查了以下链接,但仍然没有明确的答案。
Query1 - DateTime picker in bootstrap is not working
Query 2 - Twitter bootstrap datetime-picker not showing properly in modal
Query 3 - Bootstrap datetime-picker showing in modal as partial
您要为此元素初始化选择器:$('#ot_date').datetimepicker()。 但它是一个 'div' 元素,而不是输入。尝试将您的 HTML 更改为:
<div class="form-group">
<div class='input-group date'>
<input type='text' class="form-control datepicker" id="ot_date" placeholder="Enter OT Date" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
首先,非常感谢 @Guruprasad Rao 让我知道我的代码中缺少什么。我在控制台中发现在调用 bootstrap-datetimepicker.js 之前首先需要 Moment.js。所以你可以下载the Moment.js from here.
在我的代码中,我实现了,如下:
<script src="<?php echo base_url(); ?>assets/bootstrap/plugins/datetimepicker/js/moment.js"></script>
<script src="<?php echo base_url(); ?>assets/bootstrap/plugins/datetimepicker/js/bootstrap-datetimepicker.js"></script>
提醒: Moment.js 必须先调用 datetimepicker.js
其次,非常感谢@Melvas。我向你们致敬。感谢您更正我的代码。如您所说,ID="ot_date" 添加到输入元素中,而不是 DIV。脑洞大...
所以实施我上面提到的两个更改,我得到了下面的截图。
日历现在按预期工作。