带有 jQ​​uery datepicker 的 Ajax 帖子不显示日期

Question

我的表单中有一个日期选择器，我想通过 ajax 调用发布表单数据。我的问题是表单没有从日期选择器中选择日期。

这是我与日期选择器一起使用的主题的链接： http://wrapbootstrap.com/preview/WB00U99JJ

这是表单内的日期选择器的 html：

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

这是我的 ajax 帖子

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

我正在控制台中运行以查看我得到了什么。 form.serializeArray() 正在工作，而 date.val() 获取所选日期。我的问题是如何将日期值放入 form.serializeArray()？

* 更新 *

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

您可以在 div 旁边添加一个 hidden 元素，因为它没有任何 input 元素。

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

在你的提交中你可以做

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

以便您的日期值作为hidden 元素提交。