如何將日期選擇器添加到可編輯內容的TD中？

Question

以下是我的代碼：

 var j = jQuery.noConflict(); j(".datetimepicker").click(function() { j(".datetimepicker").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('.datetimepicker').focus().html(dateText).blur(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <tr> <th>First Date</th> <td class='datetimepicker' contenteditable='true'>"+ paidDate1 + "</td> </tr> 

因此，當我單擊該行時，內容是可編輯的，但日期選擇器未顯示。 我怎樣才能解決這個問題？

Answer 1

AFAIK您不能將datepicker與<td> ，因此有一種方法可以將內容替換為<input> 。

如果那不是您想要的，請原諒我。

 var newDate = new Date(); var paidDate1 = newDate.getFullYear() + "/" + ('0' + (newDate.getMonth() + 1)).slice(-2) + "/" + ('0' + newDate.getDay()).slice(-2); var tr = "<tr><th>First Date</th><td>" + paidDate1 + "</td></tr>"; $('#t').append(tr); // to avoid twice click on td; $("#t").on('click.input', 'input', function(event) { event.stopPropagation(); }) $("#t").on('click.td', 'td', function() { var $td = $(this); var text = $(this).html(); var $input = $('<input class="datetimepicker" value="' + text + '"/>'); $td.html('').append($input); $input.datepicker({ dateFormat: 'dd-mm-yy', onClose: function(dateText, inst) { $td.html(dateText.split('-').reverse().join('/')); $td.attr('disabled', false); } }).datepicker('show'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <table id="t"></table> 

Answer 2

您是否嘗試過使用j(document).find('td.datetimepicker') ？ 當您嘗試僅按類選擇時，表具有奇怪的行為。