如何为contenteditable元素添加datetimepicker？含jQuery实现方案咨询

Hey there! Let's break down how to solve both of your datetimepicker questions—whether you're working with a generic contenteditable element or specifically a <td> using jQuery.

1. Adding a Datetimepicker to Any Contenteditable Element #

The core idea here is that contenteditable elements act like editable text containers, so we can hook into their interaction events (click/focus) to trigger a datetimepicker, then populate the selected value back into the element.

First, make sure you have the necessary dependencies loaded. For this example, we'll use the jQuery UI DateTimePicker (a popular extension of jQuery UI's datepicker):

• Include jQuery first, then jQuery UI, then the datetimepicker extension.

Here's a basic implementation:

<!-- Dependencies -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.css">

<!-- Your contenteditable element -->
<div contenteditable="true" id="editable-date">Click to select date/time</div>

<script>
$(document).ready(function() {
  // Initialize datetimepicker
  $("#editable-date").datetimepicker({
    onSelect: function(dateText) {
      // Populate the selected date/time into the contenteditable element
      $(this).text(dateText);
      // Blur the element to hide the cursor (optional)
      $(this).blur();
    }
  });

  // Trigger the datetimepicker when the element is clicked or focused
  $("#editable-date").on("click focus", function() {
    $(this).datetimepicker("show");
  });
});
</script>

Key notes:

• The onSelect callback is where we take the selected date string and insert it into the contenteditable element using .text() (or .html() if you need formatting).
• We explicitly trigger the picker on click/focus to ensure it opens reliably, since contenteditable elements don’t behave exactly like input fields.

2. Using jQuery to Attach Datetimepicker to a Contenteditable Element #

For <td> elements, the approach is almost identical—we just target the table cell instead of a div. Let's use a practical table example:

<!-- Dependencies same as above -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.css">

<!-- Your table with contenteditable <td> -->
<table>
  <tr>
    <th>Event</th>
    <th>Date/Time</th>
  </tr>
  <tr>
    <td>Meeting</td>
    <td contenteditable="true" class="editable-td-date">Click to set time</td>
  </tr>
</table>

<script>
$(document).ready(function() {
  // Target all contenteditable <td> with the class
  $(".editable-td-date").datetimepicker({
    dateFormat: "yy-mm-dd",
    timeFormat: "HH:mm:ss",
    onSelect: function(dateText) {
      $(this).text(dateText);
      $(this).blur(); // Optional: Remove focus after selection
    }
  });

  // Handle click/focus to open the picker
  $(".editable-td-date").on("click focus", function(e) {
    // Prevent default contenteditable cursor behavior if needed
    e.preventDefault();
    $(this).datetimepicker("show");
  });
});
</script>

Bonus Tips #

• If you prefer a lighter library (without jQuery UI), Flatpickr works great too—just initialize it on the contenteditable element and use its onChange event to set the element's text.
• Always test for edge cases: What if the user manually types text instead of using the picker? You can add validation or disable manual editing by listening to keydown events and preventing input.

内容的提问来源于stack exchange，提问作者Arnold Lagbas