Ajax post with jQuery datepicker not showing date

Question

I have a datepicker in my form and I would like to post the form data with an ajax call. My problem is that the form does not get the date selected from the datepicker.

Here is the link to the theme I am using with the datepicker: http://wrapbootstrap.com/preview/WB00U99JJ

Here is the html for the datepicker which is inside the form:

<div id="datepicker-inline" name="date"></div>

Here is my ajax post

$('#submit').on('click', function() {
    var form = $('form');
    var date = $('#datepicker-inline');
    $.ajax('/api/service', {
        type: 'POST',
        contentType: 'application/json',
        dataType: 'json',
        data: form.serializeArray(),
        success: function(response) {
            console.log("Success!");
            $('#status').addClass('status-bar-success');
        },
        error: function() {
            console.log('OH NOES!');
            console.log(form.serializeArray());
            console.log(date.val());
            $('#status').addClass('status-bar-error');
        }
    });
});

I am running in the console to see what I get. The form.serializeArray() is working and the date.val() gets the date selected. My quesion is how do I had the date value into the form.serializeArray()?

* UPDATE *

html

<div id="datepicker-inline"></div>
<input type="text" id="date_hidden" name="date added" class="no_show"/>

ajax

$('#submit').on('click', function() {
    var form = $('form');
    var date = $('#datepicker-inline').val();
    $('#date_hidden').val(date);
    $.ajax('/api/service', {
        type: 'POST',
        contentType: 'application/json',
        dataType: 'json',
        data: form.serializeArray(),
        success: function(response) {
            console.log("Success!");
            $('#status').addClass('status-bar-success');
        },
        error: function() {
            console.log('OH NOES!');
            console.log(form.serializeArray());
            console.log(date);
            $('#status').addClass('status-bar-error');
        }
    });
});

Answer 1

You could have a hidden element alongside that div since it doesn't have any input element.

<div id="datepicker-inline" name="date"></div>
<input type="hidden" id="datepicker-inline_hidden" name="date"/>

And in your submit you could do

$('#submit').on('click', function() {
    var form = $('form');
    var date = $('#datepicker-inline');
    $('#datepicker-inline_hidden').val(date);
    //... your code

So that your date value is submitted as the hidden element.