I am using the most basic example of the Datepicker inside a <form> element.

<div class="md-form" style="max-width: 200px;">
<input type="text" id="cycle-end-date" class="form-control datepicker">
<label for="cycle-end-date">Cycle End Date</label>
</div>

I initialize it as follows:

$(document).ready(function () {
$('.datepicker').pickadate({
format: 'mm-dd-yyyy',
});
}


Then I am overriding the form submit with jquery/ajax as follows:

$('#report-upload-form').submit(function(e) {
    e.preventDefault();

    var form = $(this);
    var data = new FormData(this);
    var url = form.attr( "action");
    var method = form.attr( "method" );
    var msg = 'Uploading report...'
    $('#cover-screen-text').text(msg);
    $('#cover-screen').show();

    $.ajax({
        url         : url,
        data        : data,
        cache       : false,
        contentType : false,
        processData : false,
        type        : method,
        dataType    : 'json'
    })
    .always(function () {
        $('#cover-screen').hide();
    })
    .done(function (data) {
        // occurs only on success
        if (data.success) {
            showMessage('Success', data.msg);
        }
        else
            showError('Error', data.error);
    })

    ;
});

On the server I display all inputs from the request and it has everything except for the datepicker field/value. Any help would be greatly appreciated. Thanks

---