從 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，每個都為 null 或給我錯誤

無法讀取屬性

提前致謝。

Answer 1

嘗試：

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

...像那樣大寫DateTimePicker 。

更新：為了回答 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));
            }
        });
    };