How to change the Date Format of an inline DatePicker in jQuery Editable DataTables

I've been working on a .Net MVC project that uses an older version of jQuery Datatables. The work involved upgrading a datatable to be editable. Using this CodeProject article I successfully upgraded the DataTable with DataTables Editable.

DataTables editable allows for non-standard inline input types, one of which is a datepicker, described here, which uses jeditable-datepicker. One problem I faced was setting the format of the datepicker to EU format dd/mm/yy rather than the default US format mm/dd/yy.

After exhausting lots of methods of conversion both client side and server side, I finally stumbled upon the github page for jeditable-datpicker which lists format as one of the usage options. A simple option yes, but lack of detailed documentation for DataTables Editable caused me to go searching and experimenting for longer than I should have needed to. Hopefully this post will save someone else that time :-)

For posterity, the code below shows how to set the format option of a datepicker in an editable datatable:


...
"aoColumns": [
{  type:   'datepicker',
    sSuccessResponse: "IGNORE",
    datepicker: {
        dateFormat: 'dd/mm/yy'
    }
},
]
...


SOURCE LINKS:

CodeProject - ASP.NET MVC Editable Table (jQuery DataTables and ASP.NET MVC integration - Part II)

jQuery DataTables Usage Reference

GitHub - jEditable Datepicker