如何将CRUD输出的日期格式从YYYY-MM-DD改为dd/mm/yyyy？

要将CRUD表格中的日期显示格式从YYYY-MM-DD改为dd/mm/yyyy，同时保证编辑功能正常工作（日期输入框需要YYYY-MM-DD格式），需做以下修改：

1. 添加日期格式转换工具函数 #

在JS代码顶部新增一个函数，用于将输入框返回的YYYY-MM-DD格式转换为dd/mm/yyyy：

function formatDateForDisplay(dateStr) {
  if (!dateStr) return '';
  const [year, month, day] = dateStr.split('-');
  return `${day}/${month}/${year}`;
}

2. 修改表格行构建逻辑 #

在productBuildTableRow函数中，修改日期单元格的生成代码：存储原始YYYY-MM-DD格式到data-date属性，同时显示转换后的dd/mm/yyyy格式：

function productBuildTableRow(id) {
  const introDateVal = $("#introdate").val();
  const finishDateVal = $("#finishdate").val();
  
  var ret =
    "<tr>" +
    "<td>" +
    "<button type='button' " +
    "onclick='productDisplay(this);' " +
    "class='btn btn-default' " +
    "data-id='" + id + "'>" +
    "<span class='glyphicon glyphicon-pencil' />" +
    "</button>" +
    "</td>" +
    "<td>" + $("#productname").val() + "</td>" +
    // 修改introdate单元格：存储原始日期，显示格式化后的日期
    "<td data-date='" + introDateVal + "'>" + formatDateForDisplay(introDateVal) + "</td>" +
    // 修改finishdate单元格：存储原始日期，显示格式化后的日期
    "<td data-date='" + finishDateVal + "'>" + formatDateForDisplay(finishDateVal) + "</td>" +
    "<td>" + $("#url").val() + "</td>" +
    "<td>" + $("#phone").val() + "</td>" +
    "<td>" + $("#note").val() + "</td>" +
    "<td>" + $("#client").val() + "</td>" +
    "<td>" +
    "<button type='button' " +
    "onclick='productDelete(this);' " +
    "class='btn btn-default' " +
    "data-id='" + id + "'>" +
    "<span class='glyphicon glyphicon-minus' />" +
    "</button>" +
    "</td>" +
    "</tr>"
  return ret;
}

3. 修改编辑功能的日期读取逻辑 #

在productDisplay函数中，从单元格的data-date属性读取原始YYYY-MM-DD格式的日期，而非显示文本：

function productDisplay(ctl) {
  var row = $(ctl).parents("tr");
  var cols = row.children("td");
  activeId = $($(cols[0]).children("button")[0]).data("id");
  $("#productname").val($(cols[1]).text());
  // 从data-date属性读取原始日期格式
  $("#introdate").val($(cols[2]).data("date"));
  $("#finishdate").val($(cols[3]).data("date"));
  $("#url").val($(cols[4]).text());
  $("#phone").val($(cols[5]).text());
  $("#note").val($(cols[6]).text());
  $("#client").val($(cols[7]).text());
  $("#updateButton").text("Aggiorna");
}

完整修改后的JS代码 #

var nextId = 1;
var activeId = 0;

// 新增日期格式转换函数
function formatDateForDisplay(dateStr) {
  if (!dateStr) return '';
  const [year, month, day] = dateStr.split('-');
  return `${day}/${month}/${year}`;
}

function productDisplay(ctl) {
  var row = $(ctl).parents("tr");
  var cols = row.children("td");
  activeId = $($(cols[0]).children("button")[0]).data("id");
  $("#productname").val($(cols[1]).text());
  // 修改：从data-date读取原始日期
  $("#introdate").val($(cols[2]).data("date"));
  $("#finishdate").val($(cols[3]).data("date"));
  $("#url").val($(cols[4]).text());
  $("#phone").val($(cols[5]).text());
  $("#note").val($(cols[6]).text());
  $("#client").val($(cols[7]).text());
  $("#updateButton").text("Aggiorna");
}

function productUpdate() {
  if ($("#updateButton").text() == "Add") {
    productUpdateInTable(activeId);
  }
  else {
    productAddToTable();
  }
  formClear();
  $("#productname").focus();
}

function productAddToTable() {
  if ($("#productTable tbody").length == 0) {
    $("#productTable").append("<tbody></tbody>");
  }

  $("#productTable tbody").append(
    productBuildTableRow(nextId));
  nextId += 1;
}
function productUpdateInTable(id) {
  var row = $("#productTable button[data-id='" + id + "']")
    .parents("tr")[0];

  $(row).after(productBuildTableRow(id));
  $(row).remove();

  formClear();
  $("#updateButton").text("Add");
}
function productBuildTableRow(id) {
  const introDateVal = $("#introdate").val();
  const finishDateVal = $("#finishdate").val();
  
  var ret =
    "<tr>" +
    "<td>" +
    "<button type='button' " +
    "onclick='productDisplay(this);' " +
    "class='btn btn-default' " +
    "data-id='" + id + "'>" +
    "<span class='glyphicon glyphicon-pencil' />" +
    "</button>" +
    "</td>" +
    "<td>" + $("#productname").val() + "</td>" +
    // 修改：存储原始日期，显示格式化后的日期
    "<td data-date='" + introDateVal + "'>" + formatDateForDisplay(introDateVal) + "</td>" +
    "<td data-date='" + finishDateVal + "'>" + formatDateForDisplay(finishDateVal) + "</td>" +
    "<td>" + $("#url").val() + "</td>" +
    "<td>" + $("#phone").val() + "</td>" +
    "<td>" + $("#note").val() + "</td>" +
    "<td>" + $("#client").val() + "</td>" +
    "<td>" +
    "<button type='button' " +
    "onclick='productDelete(this);' " +
    "class='btn btn-default' " +
    "data-id='" + id + "'>" +
    "<span class='glyphicon glyphicon-minus' />" +
    "</button>" +
    "</td>" +
    "</tr>"
  return ret;
}

function productDelete(ctl) {
  var result = confirm("Want to delete record?");
  if (result) {
    var result2 = confirm("Really?");
  }
  if (result2) {
    $(ctl).parents("tr").remove();
  }
}

function formClear() {
  $("#productname").val("");
  $("#introdate").val("");
  $("#finishdate").val("");
  $("#url").val("");
  $("#phone").val("");
  $("#note").val("");
  $("#client").val("");
}
function doSearch(text, color = "yellow") {
  if (color != "transparent") {
    doSearch(document.getElementById('hid_search').value, "transparent");
    document.getElementById('hid_search').value = text;
  }
  if (window.find && window.getSelection) {
    document.designMode = "on";
    var sel = window.getSelection();
    sel.collapse(document.body, 0);

    while (window.find(text)) {
      document.execCommand("HiliteColor", false, color);
      sel.collapseToEnd();
    }
    document.designMode = "off";
  } else if (document.body.createTextRange) {
    var textRange = document.body.createTextRange();
    while (textRange.findText(text)) {
      textRange.execCommand("BackColor", false, color);
      textRange.collapse(false);
    }
  }
}

说明 #

• 表格中会显示dd/mm/yyyy格式的日期，同时通过data-date属性保留原始的YYYY-MM-DD格式，确保编辑时日期输入框能正确识别日期。
• 空日期会被正确处理，不会出现格式错误。

内容的提问来源于stack exchange，提问作者Mr. H