How to fill up input value of datetime-local when editing in table?

Question

What I'm trying to achieve is when I press the edit button, the text's value for the datetime-local will be copied over to the editing row, this worked for other fields but not for datetime-local.

I tried using an if statement: if the index is 2 (which is the index for the start datetime), but it still doesn't work.

The dd-MM-yyyy hh:mm tt should be correct and aligned with the datetime-local input's format.

When in table view:

After pressing edit button:

<table class="w3-table-all w3-small w3-hoverable" id="table" style="width: 100%;">
          <thead>
            <tr class="w3" style="background-color: rgb(205, 226, 210); color: white;">
              <th>ID</th>
              <th>Event Name</th>
              <th>Event Start Date</th>
              <th>Event End Date</th>
              <th>Location</th>
              <th>Status</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            <tr id="template_row_data" class="w3-hover-grey">
              <td class="numeric id"></td>
              <td class="text event_name"></td>
              <td class="text event_start_date"></td>
              <td class="text event_end_date"></td>
              <td class="text location"></td>
              <td class="text status"></td>
              <td class="icon" style="text-align: center; vertical-align: middle;">
                <i class="fa fa-eye w3-large w3-text-grey view-btn" aria-hidden="true" title="Show QR"></i> &nbsp;&nbsp;
                <i class="fa fa-edit w3-large w3-text-grey edit-btn" aria-hidden="true" title="Edit row"></i> &nbsp;&nbsp;
                <i class="fa fa-circle-o-notch fa-spin w3-large w3-text-grey" aria-hidden="true"
                  title="Save to server"></i>
              </td>
            </tr>
          </tbody>
          <tr id="row_edit" class="w3-hover-khaki">
            <td class="text id">
            </td>
            <td class="text event_name">
              <input type="text" id="in_event_name" class="text" style="border:1px solid black"><br>
              <i class="w3-text-red w3-tiny errmsg_in" id="errmsg_event_name"></i>
            </td>
            <td class="text event_start_date">
              <input type="datetime-local" id="in_event_start_date" class="text" style="border:1px solid black"><br>
              <i class="w3-text-red w3-tiny errmsg_in" id="errmsg_event_start_date"></i>
            </td>
            <td class="text event_end_date">
              <input type="datetime-local" id="in_event_end_date" class="text" style="border:1px solid black"><br>
              <i class="w3-text-red w3-tiny errmsg_in" id="errmsg_event_end_date"></i>
            </td>
            <td class="text location">
              <input type="text" id="in_location" class="text" style="border:1px solid black"><br>
              <i class="w3-text-red w3-tiny errmsg_in" id="errmsg_location"></i>
            </td>
            <td class="text status">
              <select name="in_status" id="in_status" class="text" style="border:1px solid black; ">
                <option value="Active">Active</option>
                <option value="Inactive">Inactive</option>
              </select>
              <i class="w3-text-red w3-tiny errmsg_in" id="errmsg_status"></i>
            </td>
            <td class="icon" style="text-align: center;">
              <i class="fa fa-save w3-large w3-text-grey" aria-hidden="true" title="Save data"></i> &nbsp;&nbsp;
              <i class="fa fa-times w3-large w3-text-red" aria-hidden="true" title="Cancel"></i>
            </td>
          </tr>
        </table>

var id = "";
  $(document).on('click', '.fa-edit', function () {
    row2edit = $(this).parent().parent();
    id = $(this).parent().parent().attr('id');
    // Copy original data from row to edit into
    // edit row input fields and columns
    let newEditRow = $("#row_edit").clone();
    newEditRow.children().eq(0).text(row2edit.children(".id").text());
    let in_fields = [{ 'td_class': 'td.id' },
    { 'td_class': 'td.event_name', 'id_edit': '#in_event_name' },
    { 'td_class': 'td.event_start_date', 'id_edit': '#in_event_start_date' },
    { 'td_class': 'td.event_end_date', 'id_edit': '#in_event_end_date' },
    { 'td_class': 'td.location', 'id_edit': '#in_location' },
    { 'td_class': 'td.status', 'id_edit': '#in_status' },
    ];

    $.each(in_fields, function (idx, item) {
      let in_field_edit = newEditRow.children().eq(idx).children(item.id_edit);
      in_field_edit.val(row2edit.children(item.td_class).text());
      if (idx == 2) {
        let in_field_edit = newEditRow.children().eq(idx).children(item.id_edit);
        in_field_edit.val(row2edit.children(item.td_class).val());
      }
    });

    newEditRow.show();
    row2edit.before(newEditRow);
    row2edit.hide();

    $('.fa-edit').hide();
  });

Answer 1

In order to define a datetime-local input field you still need to provide the datetime in a standardised format, see here How to set the value for the input type datetime-local?.

So, something like "2021-05-21T08:23" would be accepted.

var id = "";
  $(document).on('click', '.fa-edit', function () {
    row2edit = $(this).parent().parent();
    id = $(this).parent().parent().attr('id');
    // Copy original data from row to edit into
    // edit row input fields and columns
    let newEditRow = $("#row_edit").clone();
    newEditRow.children().eq(0).text(row2edit.children(".id").text());
    let in_fields = [{ 'td_class': 'td.id' },
    { 'td_class': 'td.event_name', 'id_edit': '#in_event_name' },
    { 'td_class': 'td.event_start_date', 'id_edit': '#in_event_start_date' },
    { 'td_class': 'td.event_end_date', 'id_edit': '#in_event_end_date' },
    { 'td_class': 'td.location', 'id_edit': '#in_location' },
    { 'td_class': 'td.status', 'id_edit': '#in_status' },
    ];

    $.each(in_fields, function (idx, item) {
      let in_field_edit = newEditRow.children().eq(idx).children(item.id_edit);
      in_field_edit.val(row2edit.children(item.td_class).text());
      if (idx>1 && idx<4) {
        let in_field_edit = newEditRow.children().eq(idx).children(item.id_edit);
        in_field_edit.val(row2edit.children(item.td_class).text().split(".").reverse().join("-")+"T00:00");
      }
    });

    newEditRow.show();
    row2edit.before(newEditRow);
    row2edit.hide();

    $('.fa-edit').hide();
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="w3-table-all w3-small w3-hoverable" id="table" style="width: 100%;">
          <thead>
            <tr class="w3" style="background-color: rgb(205, 226, 210); color: white;">
              <th>ID</th>
              <th>Event Name</th>
              <th>Event Start Date</th>
              <th>Event End Date</th>
              <th>Location</th>
              <th>Status</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            <tr id="template_row_data" class="w3-hover-grey">
              <td class="numeric id">123</td>
              <td class="text event_name">myEvent</td>
              <td class="text event_start_date">23.04.2021</td>
              <td class="text event_end_date">24.04.2021</td>
              <td class="text location">somewhere</td>
              <td class="text status">Active</td>
              <td class="icon" style="text-align: center; vertical-align: middle;">
                <i class="fa fa-eye w3-large w3-text-grey view-btn" aria-hidden="true" title="Show QR"></i> &nbsp;&nbsp;
                <i class="fa fa-edit w3-large w3-text-grey edit-btn" aria-hidden="true" title="Edit row">edit</i> &nbsp;&nbsp;
                <i class="fa fa-circle-o-notch fa-spin w3-large w3-text-grey" aria-xhidden="true"
                  title="Save to server"></i>
              </td>
            </tr>
          </tbody>
          <tr id="row_edit" class="w3-hover-khaki">
            <td class="text id">
            </td>
            <td class="text event_name">
              <input type="text" id="in_event_name" class="text" style="border:1px solid black"><br>
              <i class="w3-text-red w3-tiny errmsg_in" id="errmsg_event_name"></i>
            </td>
            <td class="text event_start_date">
              <input type="datetime-local" id="in_event_start_date" class="text" style="border:1px solid black"><br>
              <i class="w3-text-red w3-tiny errmsg_in" id="errmsg_event_start_date"></i>
            </td>
            <td class="text event_end_date">
              <input type="datetime-local" id="in_event_end_date" class="text" style="border:1px solid black"><br>
              <i class="w3-text-red w3-tiny errmsg_in" id="errmsg_event_end_date"></i>
            </td>
            <td class="text location">
              <input type="text" id="in_location" class="text" style="border:1px solid black"><br>
              <i class="w3-text-red w3-tiny errmsg_in" id="errmsg_location"></i>
            </td>
            <td class="text status">
              <select name="in_status" id="in_status" class="text" style="border:1px solid black; ">
                <option value="Active">Active</option>
                <option value="Inactive">Inactive</option>
              </select>
              <i class="w3-text-red w3-tiny errmsg_in" id="errmsg_status"></i>
            </td>
            <td class="icon" style="text-align: center;">
              <i class="fa fa-save w3-large w3-text-grey" aria-hidden="true" title="Save data"></i> &nbsp;&nbsp;
              <i class="fa fa-times w3-large w3-text-red" aria-hidden="true" title="Cancel"></i>
            </td>
          </tr>
        </table>