使用Datepicker进行数据表内联编辑

Question

Ok so I have this datatable with around 90 fields being populated from a dbContext (Visual Studio MVC4). I added the .makeEditable() to enjoy inline editing...

Most of my fields are of a type string (but a user CAN input a date if he opts to....even though its a text type field, the date will be input as simple text..)

The problem I have is that even though I'm successfully being able to get the class of the edit form to become "datepicker", the calender isn't popping up and on other simple non-datatable pages, it runs just fine.

I want to be able to set certain column cells to have inline datepicking ability..

I want my table to look like this thing http://jquery-datatables-editable.googlecode.com/svn/trunk/inline-edit-extra.html

I tried mimic-ing the code there but with no success....its always a textbox for editing instead of a calender view..

UPDATE: I noticed that if I change the "type:" field in

$.fn.editable.defaults = {
        name: 'value',
        id: 'id',
        type: 'datepicker',
        width: 'auto',
        height: 'auto',
        event: 'click.editable',
        onblur: 'cancel',
        loadtype: 'GET',
        loadtext: 'Loading...',
        placeholder: 'Double-Click to edit',
        loaddata: {},
        submitdata: {},
        ajaxoptions: {}
    };

My entire table gets a datepicker on editing mode...

Apparently the intializing code to give certain columns datepicker options doesn't work as it should ....or at least I guess so

**UPDATE END****

This is my datatable initialization code:

<script language="javascript" type="text/javascript">

$(function() {
    $(".datepicker").datepicker({ dateFormat: 'dd-MM-yy' });
});
$(document).ready(function ()
{

    $('#myDataTable thead tr#filterrow th').each(function () {

        var title = $('#myDataTable thead th').eq($(this).index()).text();
        $(this).html('<input type="text" onclick="stopPropagation(event);" placeholder="Search ' + title + '""style="direction: ltr; text-align:left;" />');

    });
    $("#myDataTable thead input").on('keyup change', function () {
        table
            .column($(this).parent().index() + ':visible')
            .search(this.value)
            .draw();
    });

    var table = $('#myDataTable').DataTable({
        //"scrollY": "200",
        "scroller": "true",
        "deferRender": "true",
        "orderCellsTop": "true",
        "columnDefs": [
            { "visible": false, "targets": 1 },
             { "type": "datepicker", "aTargets": [6,7,8,9,10] },
           { 'sClass':"datepicker", "aTargets": [6, 7, 8, 9, 10] }
        ],
        "order": [[1, 'asc']],
        "displayLength": 25,
        "drawCallback": function (settings)
        {
            $(".datepicker").datepicker({ dateFormat: 'dd-MM-yy' });
            var api = this.api();
            var rows = api.rows({ page: 'current' }).nodes();
            var last = null;

            api.column(1, { page: 'current' }).data().each(function (group, i) {
                if (last !== group) {
                    $(rows).eq(i).before(
                        '<tr class="group"><td colspan="88">' + group + '</td></tr>'
                    );

                    last = group;
                }

            });
        },
        "fndrawCallback": function (settings) {
            $(".datepicker").datepicker({ dateFormat: 'dd-MM-yy' });
        }
    });
    // Apply the search
    table.columns().every(function () {
        var that = this;

        $('input', this.header()).on('keyup change', function () {
            that
                .search(this.value)
                .draw();
        });
    });

    // Order by the grouping
    $('#myDataTable tbody').on('click', 'tr.group', function () {
        var currentOrder = table.order()[0];
        if (currentOrder[0] === 1 && currentOrder[1] === 'asc') {
            table.order([1, 'desc']).draw();
        }
        else {
            table.order([1, 'asc']).draw();
        }
    });
 //$('#myDataTable thead').append($('#myDataTable thead tr:eq(0)')[0]);
    $('#myDataTable').dataTable().makeEditable({
        "aoColumnDefs": [
           { "type": "hasDatepicker", "aTargets": 4 },
           { "sClass": "hasDatepicker", "aTargets": 4 }
        ]
    });
});

function stopPropagation(evt) {
    if (evt.stopPropagation !== undefined) {
        evt.stopPropagation();
    } else {
        evt.cancelBubble = true;
    }
}

this is the datepicker.js

// add :focus selector
jQuery.expr[':'].focus = function (elem) {
    return elem === document.activeElement && (elem.type || elem.href);
};

$.editable.addInputType(' datepicker', {

    /* create input element */
    element: function (settings, original) {
        var form = $(this),
            input = $('class ="datepicker" <input />');
       // input.attr('class', 'datepicker');
        input.attr('autocomplete', 'off');
        form.append(input);
        return input;
    },

    /* attach jquery.ui.datepicker to the input element */
    plugin: function (settings, original) {
        var form = this,
            input = form.find("input");

        // Don't cancel inline editing onblur to allow clicking datepicker
        settings.onblur = 'nothing';

        datepicker = {
            onSelect: function () {
                // clicking specific day in the calendar should
                // submit the form and close the input field
                form.submit();
            },

            onClose: function () {
                setTimeout(function () {
                    if (!input.is(':focus')) {
                        // input has NO focus after 150ms which means
                        // calendar was closed due to click outside of it
                        // so let's close the input field without saving
                        original.reset(form);
                    } else {
                        // input still HAS focus after 150ms which means
                        // calendar was closed due to Enter in the input field
                        // so lets submit the form and close the input field
                        form.submit();
                    }

                    // the delay is necessary; calendar must be already
                    // closed for the above :focus checking to work properly;
                    // without a delay the form is submitted in all scenarios, which is wrong
                }, 150);
            }
        };

        if (settings.datepicker) {
            jQuery.extend(datepicker, settings.datepicker);
        }

        input.datepicker(datepicker);
    }
});   

Answer 1

So after a lot of trial and error.....

I manually input the type of each of my 90 columns, and it manually worked....columnDefs with targeting a list of columns is probably bugged as in jeditable.datepicker it doesn't parse a list of columns passedin the settings....

Hope this helps a lost soul later on...