anchor.diff:  
   Here is the new script code :
   
  -[code language="html"]
  +[source,html]
   
  -// In place edition
  -
  -$(".task td.editable").editInPlace(\{
  -
  -bg_over: 'transparent',
  -
  -callback: function(el, enteredText, o) \{
  -
  -var m = /([a-z]+)-(\d+)/.exec(el), data = \{}
  -
  -data['task.id'] = m[2]
  -
  -data['task.' + m[1]] = enteredText
  -
  -// Save result
  -
  -$.ajax(\{
  -
  -url: '@\{add()}',
  -
  -type: 'POST',
  -
  -data: data,
  -
  -success: function() \{$('#' + el).html(n)},
  -
  -error: function() \{$('#' + el).html(o)}
  -
  -})
  -
  -return true
  -
  -}
  -
  -});
  -
  -[/code]
  +-----------------------
  +        // In place edition
  +        $(".task td.editable").editInPlace({
  +            bg_over: 'transparent',
  +            callback: function(el, enteredText, o) {
  +                var m = /([a-z]+)-(\d+)/.exec(el), data = {}
  +                data['task.id'] = m[2]
  +                data['task.' + m[1]] = enteredText
  +                
  +                // Save result
  +                $.ajax({
  +                    url: '@{add()}',
  +                    type: 'POST',
  +                    data: data,
  +                    success: function() {$('#' + el).html(n)},
  +                    error: function() {$('#' + el).html(o)}
  +                })
  +                
  +                return true
  +            }
  +        });
  +-----------------------
   
   A little explaination of the callback function :
   
  
positive.code: 
  Now add the datepicker; So we will replace the column value _>_ with an icon to call the datepicker :
  
  [code language="html"]
  
  <td> <input type="hidden" class="datepicker" id="datepicker-$\{task.id}" value="$\{task.due?.format('dd-MM-yyyy')}" /></td>
  
  [/code]
  
  and add the associated JQuery code :
  
  [code language="html"]
  
  $(".datepicker").datepicker(\{dateFormat:'dd-mm-yy', showAnim:'fadeIn',
  
  showOn: 'button',
  
  buttonImage: '/public/images/calendar.png',
  
  buttonImageOnly: true,
  
  onClose: function(dateText, inst)\{
  
  var m = /([a-z]+)-(\d+)/.exec($(this).attr('id'));
  
  sp = $('#due-'+m[2]); // take the editInPlace widget
  
  sp.text(dateText);
  
  // Make the Ajax call : should fire blur on origibal field
  
  var data = \{};
  
  data['task.id'] = m[2];
  
  data['task.due'] = dateText;
  
  $.ajax(\{
  
  url: '@\{add()}',
  
  type: 'POST',
  
  data: data,
  
  success: function() \{$('#' + el).html(n)},
  
  error: function() \{$('#' + el).html(o)}
  
  });
  
  }
  
  })
  
  [/code]
  
  After copying the value selected in the date picker to the original date field, I make an ajax call.
  
  On this datepicker, we should not make an ajax call, but update the date field and click then blur to activate the ajax call on the field value (and so write once the ajax call). But I have some problems make it run it this how-to, though it works prefectly in one of my projects. Here the code of my prject when it runs :
  
  [code language="html"]
  
  sp = $('#due-'+m[2]); // take the editInPlace widget
  
  sp.text(dateText).click(); // set the date and trigger a click
  
  $(':input', sp).blur();
  
  [/code]
  
  The code is far shorter and factorized. I've post event if I can't make it run on my how-to project to share it and I'll updated this post when I'll find the problem.
  
negative.code: 
  First we add a class to the date field, different from the previous (__editable__) as we will have an additionnal action from the standard editable behaviour (refresh the datepicker value when the date is update) :
  
  [source,html]
  
  -----------------------
  <td class="date-editable" id="due-${task.id}">${task.due?.format('dd-MM-yyyy')}</td>
  -----------------------
  
  and make it editable
  
  [source,html]
  
  -----------------------
      $(".task td.date-editable").editInPlace({
          bg_over: 'transparent',       
      element_id: 'element_id',
      callback: function(el, n, o) {
              var m = /([a-z]+)-(\d+)/.exec(el), data = {}
              data['task.id'] = m[2]
              data['task.' + m[1]] = n
              
              // Save result
              $.ajax({
                  url: '@{add()}',
                  type: 'POST',
                  data: data,
                  success: function() {$('#' + el).html(n)},
                  error: function() {$('#' + el).html(o)}
              })
              return true
          }
      });
  -----------------------
  
  Here is the new behaviour :
  
  