我在从嵌入式/内联 Bootstrap datetimepicker 获取选定值时遇到问题。
这是我的代码:
<div class="col-lg-8 datepicker_area" style="background: red;">
<div style="overflow:hidden;">
<div class="form-group">
<div class="row">
<div class="col-md-8">
<div id="datetimepicker" data-date="12/03/2012 12:00 PM"></div>
<input type="hidden" name="date" id="my_hidden_input" value="">
</div>
</div>
</div>
<script type="text/javascript">
$("#datetimepicker").on("changeDate", function(event) {
$("input[type='hidden'][name='date']").val(
$('#datetimepicker').datepicker('getFormattedDate')
)
});
$(function () {
$('#datetimepicker').datetimepicker({
inline: true,
sideBySide: true
});
$('#datetimepicker').datetimepicker();
$('#datetimepicker').on("changeDate", function() {
$('#my_hidden_input').val(
$('#datetimepicker').datetimepicker('getFormattedDate')
);
});
});
</script>
</div>
</div>
我的隐藏输入没有任何反应。 他没有保存其中的值(value)。
我从 bootstrap 文档中获得了代码。
有人知道它是如何工作的吗? 谢谢。
最佳答案
根据 Bootstrap 3 Datepicker,您需要 dp.change
事件。
引用:http://eonasdan.github.io/bootstrap-datetimepicker/Events/
替换你的 changeDate 事件 $('#datetimepicker').on("changeDate", function() {});
到
$('#datetimepicker').on('dp.change', function(event) {});
您可以使用 event.date
或更好的方式获取日期,格式化日期 event.date.format('MM/DD/YYYY h:mm a')
示例:
$('#datetimepicker').on('dp.change', function(event) { alert(event.date); });
请引用以下解决方案:
$(function() {
$('#datetimepicker').datetimepicker({
inline: true,
sideBySide: true
});
$('#datetimepicker').on('dp.change', function(event) {
//console.log(moment(event.date).format('MM/DD/YYYY h:mm a'));
//console.log(event.date.format('MM/DD/YYYY h:mm a'));
$('#selected-date').text(event.date);
var formatted_date = event.date.format('MM/DD/YYYY h:mm a');
$('#my_hidden_input').val(formatted_date);
$('#hidden-val').text($('#my_hidden_input').val());
});
});
#selected-date,
#hidden-val {
font-weight: bold;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<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.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<div>
Selected Date: <span id="selected-date"></span>
<br/>
<br/>Value of hidden field: <span id="hidden-val"></span>
<br/>
</div>
<div class="col-lg-8 datepicker_area" style="background: red;">
<div style="overflow:hidden;">
<div class="form-group">
<div class="row">
<div class="col-md-8">
<div id="datetimepicker" data-date="12/03/2012 12:00 PM"></div>
<input type="hidden" name="date" id="my_hidden_input" value="">
</div>
</div>
</div>
</div>
</div>
关于javascript - 从内联/嵌入式 Bootstrap 日期选择器获取值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37767078/