从 bootstrap datetimepicker 获取日期和时间

Question

我无法从引导程序日期时间选择器中获取日期和时间。我在这里阅读了很多关于正确语法的帖子，但似乎没有任何效果。

我一定是遗漏了一些小东西，或者我创建的选择器不正确。任何帮助将不胜感激。

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">&times;</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">
                            &emsp;
                            <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 使选择器工作：

//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 获取日期：

$('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')
});

如您所见，我已经尝试过 .getDate()、.date() 以及 .val() 和 .getFormattedDate，它们要么为空，要么给我错误

Cannot read property

提前致谢。

Answer 1

尝试：

console.log($('#datetimepicker').data('DateTimePicker').date());

...DateTimePicker 就这样大写了。

Update：回答 SwissCodeMen 关于使用驼峰式 '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));
            }
        });
    };

从 bootstrap datetimepicker 获取日期和时间

Get date and time from bootstrap datetimepicker

javascript

jquery

twitter-bootstrap

bootstrap-datetimepicker