title: Datatables inline editing with datepicker
body: <p>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...</p>
  
  <p>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..)</p>
  
  <p>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.</p>
  
  <p>I want to be able to set certain column cells to have inline datepicking ability..</p>
  
  <p>I want my table to look like this thing <a href="http://jquery-datatables-editable.googlecode.com/svn/trunk/inline-edit-extra.html" rel="nofollow">http://jquery-datatables-editable.googlecode.com/svn/trunk/inline-edit-extra.html</a> </p>
  
  <p>I tried mimic-ing the code there but with no success....its always a textbox for editing instead of a calender view..</p>
  
  <p><strong>UPDATE: I noticed that if I change the "type:" field in</strong> </p>
  
  <pre><code>$.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: {}
      };
  </code></pre>
  
  <p>My entire table gets a datepicker on editing mode...</p>
  
  <p>Apparently the intializing code to give certain columns datepicker options doesn't work as it should ....or at least I guess so</p>
  
  <p>**UPDATE END****</p>
  
  <p>This is my datatable initialization code:</p>
  
  <pre><code>&lt;script language="javascript" type="text/javascript"&gt;
  
  $(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('&lt;input type="text" onclick="stopPropagation(event);" placeholder="Search ' + title + '""style="direction: ltr; text-align:left;" /&gt;');
  
      });
      $("#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(
                          '&lt;tr class="group"&gt;&lt;td colspan="88"&gt;' + group + '&lt;/td&gt;&lt;/tr&gt;'
                      );
  
                      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 &amp;&amp; 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;
      }
  }
  </code></pre>
  
  <p>this is the datepicker.js</p>
  
  <pre><code>// add :focus selector
  jQuery.expr[':'].focus = function (elem) {
      return elem === document.activeElement &amp;&amp; (elem.type || elem.href);
  };
  
  $.editable.addInputType(' datepicker', {
  
      /* create input element */
      element: function (settings, original) {
          var form = $(this),
              input = $('class ="datepicker" &lt;input /&gt;');
         // 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);
      }
  });   
  </code></pre>