¿Es posible usar contentEditable con jQuery DatePicker?

Estoy buscando una forma de usar contentEditable con jQuery DatePicker. ¿Cómo puedo usarlo en tablas editables?

Encontré una respuesta aquí: http://www.sencha.com/forum/showthread.php?229598-Looking-to-enable-contenteditable-true-for-custom-input-type

Y esto es lo que traté de hacer usando el ejemplo dado en el enlace de arriba.

Código HTML:

 
2014-04-05

Código Javascript:

 $(".datepicker").datepicker({ dateFormat: 'yyyy-mm-dd', showOn: "button", buttonImage: "images/calendar.gif", buttonImageOnly: true, onClose: function(dateText, inst) { $(this).parent().find("[contenteditable=true]").focus().html(dateText).blur(); } }); 

Pero este método no funciona para mí.

Información adicional: estoy usando bootstrap y jquery-tablesorter.

Lo hice por mí mismo con los siguientes pasos:

Usó una entrada oculta para el selector de fecha, para trabajar junto con la div contenteditable:

 

Con la siguiente jQuery:

 // Binds the hidden input to be used as datepicker. $('.datepicker-input').datepicker({ dateFormat: 'dd-mm-yy', onClose: function(dateText, inst) { // When the date is selected, copy the value in the content editable div. // If you don't need to do anything on the blur or focus event of the content editable div, you don't need to trigger them as I do in the line below. $(this).parent().find('.date').focus().html(dateText).blur(); } }); // Shows the datepicker when clicking on the content editable div $('.date').click(function() { // Triggering the focus event of the hidden input, the datepicker will come up. $(this).parent().find('.datepicker-input').focus(); }); 

No estás cerrando la etiqueta div en tu html

esta

 
2014-04-05

debiera ser

 
2014-04-05

Como las filas de las tablas se generan dinámicamente, debe crear dinámicamente el selector de fecha al editar la fila. Puede usar el evento “focus” o “click” de la fila para enlazar el datepicker de forma dinámica. El siguiente código demuestra lo mismo:

  //Add dynamic row when focused on the row $(document).on("focus", "#tblMeetingDetails tr", function() { if ($(this).find("input[type=hidden].datepicker").attr("id") === undefined) { $(this).find("input[type=hidden].datepicker").datepicker({ changeMonth: true, changeYear: true, dateFormat: 'dd/mm/yy', showOn: "button", buttonImage: "images/calendar-icon.png", buttonImageOnly: true, onSelect: function() { }, onClose: function(dateText, inst) { $(this).parent().find("[contenteditable=false]").html(inst.input.text()).blur(); } }); $(this).find(".ui-datepicker-trigger").css("visibility", "hidden"); } return false; }); 

y su html para la fila se vería más o menos como el siguiente código:

   

incluso puede usar la clase “.date” para encontrar el campo contenteditable para establecer la fecha en el evento close de la siguiente manera: $ (this) .parent (). find (“fecha”). html (inst.input.text) ()).difuminar();

Espero que esto ayude 🙂

Ninguno de ellos funcionó para mí.

Creo que debe haber habido un cambio en las especificaciones del navegador donde el tipo oculto no puede tener foco.

De todos modos, mi solución es ocultar la entrada con un div.

Fyi: Tratar de ocultar la entrada o envolverla en un lapso no funcionará.

 $('.datepicker-input').datepicker({ minDate: 0, onClose: function(dateText, inst) { $('.date').text( inst.selectedDay +"-"+ (inst.selectedMonth+1) +"-"+ inst.selectedYear); } }); $('.date').click(function() { $('.datepicker-input').focus(); }); 
    
Date?