Javascript 使用模式更新数据后固定日期格式mdy

我正在使用django/ajax/jquery使用模式更新日期。当前我的数据以“M d，Y”格式显示。关于这一点，我有两个问题：

更新模式中的数据后，日期值以YYYY-MM-DD格式返回，尽管格式为“md，Y”

模态自动填充当前模型信息。当日期显示为“M d，Y”时，日期不会自动填入模式，但当日期更新后，模式再次打开（即日期当前显示为YYYY-MM-DD）时，日期自动填入正确

如何确保更新后以正确的格式显示日期，以及如何确保在模式中正确自动填充日期

表:

    <div class="col-md-8">
        <h3>Expenses</h3>
        <table id="expenseTable" class="table table-striped">
            <tr>
                <th>Vendor</th>
                <th>Date</th>
                <th>Amount</th>
                <th>Category</th>
                <th>Description</th>
                <th colspan="2">Actions</th>
            </tr>
            {% for expense in expenses %}
            <tr id="expense-{{expense.id}}">
                <td class="expenseVendor expenseData" name="vendor">{{expense.vendor}}</td>
                <td class="expenseDate expenseData" name="date">{{expense.date|date:"M d, Y"}}</td>
                <td class="expenseAmount expenseData" name="amount">{{expense.amount}}</td>
                [...]
                <td>
                    <button class="btn btn-success form-control" onClick="editExpense({{expense.id}})" data-toggle="modal" data-target="#myModal")>EDIT</button>
                </td>
                <td> 
                    <button class="btn btn-danger form-control" onClick="deleteExpense({{expense.id}})">DELETE</button>
                </td>
            </tr>
            {% endfor %}
        </table>
    </div>

费用
小贩
日期
数量
类别
描述
行动
{费用百分比中的费用百分比}
{{expense.vendor}
{{expense.date}日期：“md，Y”}
{{费用.金额}
[...]
编辑
删除
{%endfor%}

模态：

<!--MODAL-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
          <h4 class="modal-title" id="myModalLabel">Update Expense</h4>
        </div>
        <form id="updateExpense" action="">
        <div class="modal-body">
            <input class="form-control" id="form-id" type="hidden" name="formId"/>
            <label for="vendor">Vendor</label>
            <input class="form-control" id="form-vendor" type="text" name="formVendor"/>
            <label for="date">Date</label>
            <input class="form-control" id="form-date" type="date" name="formDate"/>
            [...]
            
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary" >Save changes</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
        </form>
      </div>
    </div>
  </div>

×
更新费用
小贩
日期
[...]
保存更改
接近

功能编辑费用（id）{
如果（id）{
tr_id=“#费用-”+id；
vendor=$（tr_id）.find（“.expenseVendor”）.text（）；
日期=$（tr_id）.find（“.expenseDate”）.text（）；
amount=$（tr_id）.find（“.ExpenseAmpount”）.text（）；
category=$（tr_id）.find（“.expenseCography”）.text（）；
description=$（tr_id）.find（“.expensescription”）.text（）；
$（'#form id'）.val（id）；
$（'表格供应商'）.val（供应商）；
$（'表格日期'）.val（日期）；
$（'形式金额'）.val（金额）；
$（'表格类别'）.val（类别）；
$（'形式说明'）.val（说明）；
}
}
功能附加表（费用）{
$（“#expenseTable>t正文：最后一个子项”）。追加(`
${expense.vendor}
${expense.date}
${expense.amount}
[...]
你能用生成的html创建一个JSFIDLE吗？你能用生成的html创建一个JSFIDLE吗？
function editExpense(id) {
  if (id) {
    tr_id = "#expense-" + id;
    vendor = $(tr_id).find(".expenseVendor").text();
    date = $(tr_id).find(".expenseDate").text();
    amount = $(tr_id).find(".expenseAmount").text();
    category = $(tr_id).find(".expenseCategory").text();
    description = $(tr_id).find(".expenseDescription").text();

    $('#form-id').val(id);
    $('#form-vendor').val(vendor);
    $('#form-date').val(date);
    $('#form-amount').val(amount);
    $('#form-category').val(category);
    $('#form-description').val(description);
  }
}

function appendToUserTable(expense) {
  $("#expenseTable > tbody:last-child").append(`
        <tr id="expense-${expense.id}">
            <td class="expenseVendor" name="vendor">${expense.vendor}</td>
            <td class="expenseDate" name="date">${expense.date}</td>
            <td class="expenseAmount" name="amount">${expense.amount}</td>
            [...]
            <td>
                <button class="btn btn-success form-control" onClick="editExpense(${expense.id})" data-toggle="modal" data-target="#myModal")">EDIT</button>
            </td>
            <td>
                <button class="btn btn-danger form-control" onClick="deleteExpenser(${expense.id})">DELETE</button>
            </td>
        </tr>
    `);
}


function updateToUserTable(expense){
    $("#expenseTable #expense-" + expense.id).children(".expenseData").each(function() {
        var attr = $(this).attr("name");
        if (attr == "vendor") {
          $(this).text(expense.vendor);
        } else if (attr == "date") {
          $(this).text(expense.date);
        } else if (attr == "amount") {
          $(this).text(expense.amount);
        } else if (attr == "category") {
          $(this).text(expense.category);
        } else {
          $(this).text(expense.description);
        }
      });
}
</script>