Get date and time from bootstrap datetimepicker

Question

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:

<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 to make the picker work:

//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:

$('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

Cannot read property

Thanks in advance.

Answer 1

Try:

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

...with DateTimePicker capitalized just like that.

Update: To answer SwissCodeMen's question about the use of camelcase 'DateTimePicker', this is the Bootstrap DateTimePicker code that sets that up:

    /********************************************************************************
     *
     * 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));
            }
        });
    };