javascript - Datatables inline editing with datepicker -

ok have datatable around 90 fields being populated dbcontext (visual studio mvc4). added .makeeditable() enjoy inline editing...

most of fields of type string (but user can input date if opts to....even though text type field, date input simple text..)

the problem have though i'm being able class of edit form become "datepicker", calender isn't popping , on other simple non-datatable pages, runs fine.

i want able set column cells have inline datepicking ability..

i want table thing http://jquery-datatables-editable.googlecode.com/svn/trunk/inline-edit-extra.html

i tried mimic-ing code there no success....its textbox editing instead of calender view..

update: noticed if change "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 edit',         loaddata: {},         submitdata: {},         ajaxoptions: {}     }; 

my entire table gets datepicker on editing mode...

apparently intializing code give columns datepicker options doesn't work should ....or @ least guess so

**update end****

this 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 search     table.columns().every(function () {         var = this;          $('input', this.header()).on('keyup change', function () {                             .search(this.value)                 .draw();         });     });      // order 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 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 input element */     plugin: function (settings, original) {         var form = this,             input = form.find("input");          // don't cancel inline editing onblur allow clicking datepicker         settings.onblur = 'nothing';          datepicker = {             onselect: function () {                 // clicking specific day in calendar should                 // submit form , close input field                 form.submit();             },              onclose: function () {                 settimeout(function () {                     if (!input.is(':focus')) {                         // input has no focus after 150ms means                         // calendar closed due click outside of                         // let's close input field without saving                         original.reset(form);                     } else {                         // input still has focus after 150ms means                         // calendar closed due enter in input field                         // lets submit form , close input field                         form.submit();                     }                      // delay necessary; calendar must                     // closed above :focus checking work properly;                     // without delay form submitted in scenarios, wrong                 }, 150);             }         };          if (settings.datepicker) {             jquery.extend(datepicker, settings.datepicker);         }          input.datepicker(datepicker);     } });    

so after lot of trial , error.....

i manually input type of each of 90 columns, , manually worked....columndefs targeting list of columns bugged in jeditable.datepicker doesn't parse list of columns passedin settings....

hope helps lost soul later on...