[英]Get date and time from bootstrap datetimepicker
I am having trouble getting the date and time from my bootrap datetimepicker.我无法从引导程序日期时间选择器获取日期和时间。 I've read quite a few posts on here about proper syntax, and nothing seems to be working.
我在这里阅读了很多关于正确语法的帖子,但似乎没有任何效果。
I must be missing something small, or maybe I created my picker incorrectly.我一定是遗漏了一些小东西,或者我可能错误地创建了我的选择器。 Any help would be greatly appreciated.
任何帮助将不胜感激。
HTML: HTML:
<div class="modal fade" id="newEventModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">New Event</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12" style="text-align:left">
<div class="form-group">
<label for="newEventTitle">Event Title:</label>
<input type="text" class="form-control" id="newEventTitle">
</div>
</div>
<div class="col-sm-12" style="text-align:left">
<div class="form-group">
<label for="newEventDate">Date and Time:</label>
<div class='input-group date' id='datetimepicker' style="color:#000000">
<input type='text' class="form-control" id="newEventDate" style="color:#000000;"/>
<span class="input-group-addon" style="color:#000000;">
<span class="fa fa-calendar" style="color:#4d8c40;">
</span>
</span>
</div>
</div>
</div>
<div class="col-sm-12" style="text-align:left">
<div class="form-group">
<label for="newEventComment">Comment:</label>
<input type="text" class="form-control" id="newEventComment">
</div>
</div>
<div class="col-sm-12" style="text-align:center">
<div class="form-group">
 
<br/><br/>
<input style="background-color: #4d8c40; color: #ffffff;" value="Create"
class="btn btn-secondary" id="CreateEventBtn"/>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JQuery to make the picker work:使选择器工作的 JQuery:
//enable date time picker and add icons
$(function () {
$('#datetimepicker').datetimepicker({
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-arrow-up",
down: "fa fa-arrow-down"
}
});
});
JQuery for getting date:用于获取日期的 JQuery:
$('body').on('click', '#newEventBtn', function () {
$('#newEventDate').val();
$('#newEventTitle').val();
$('#newEventComment').val();
console.log($('#newEventTitle').val());
console.log($('#datetimepicker').data('datetimepicker').date());
console.log($('#datetimepicker').data('datetimepicker').getDate());
console.log($('#datetimepicker').data('datetimepicker').getFormattedDate('yyyy-mm-dd'));
console.log($('#newEventComment').val());
//$('input[name=ImageFile]').val('')
//CreateEvent(data);
//format('DD/MM/YYYY HH:mm A')
});
As you can see, ive tried, .getDate(), .date(), as well as.val() and.getFormattedDate and each is either null or giving me the error如您所见,我已经尝试过 .getDate()、.date() 以及 .val() 和 .getFormattedDate,每个都为 null 或给我错误
Cannot read property
无法读取属性
Thanks in advance.提前致谢。
Try:尝试:
console.log($('#datetimepicker').data('DateTimePicker').date());
...with DateTimePicker
capitalized just like that. ...像那样大写
DateTimePicker
。
Update : To answer SwissCodeMen's question about the use of camelcase 'DateTimePicker'
, this is the Bootstrap DateTimePicker code that sets that up:更新:为了回答 SwissCodeMen 关于使用 camelcase
'DateTimePicker'
的问题,这是设置它的 Bootstrap DateTimePicker 代码:
/********************************************************************************
*
* jQuery plugin constructor and defaults object
*
********************************************************************************/
$.fn.datetimepicker = function (options) {
return this.each(function () {
var $this = $(this);
if (!$this.data('DateTimePicker')) {
// create a private copy of the defaults object
options = $.extend(true, {}, $.fn.datetimepicker.defaults, options);
$this.data('DateTimePicker', dateTimePicker($this, options));
}
});
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.