Fixing date format M d Y after data update using a modal

Question

I am using django / ajax / jquery to update date using a modal. Currently my data is being displayed in "M d, Y" format. I am having two issues regarding this:

1. After I update the data in the modal, the date value returns in YYYY-MM-DD format, despite the "M d, Y" format.

2. The modal autofills with the current model info. When the date is displayed as "M d, Y", the date does not autofill in the modal, but when the date is updated and then the modal is opened again (i.e. date is currently being displayed in YYYY-MM-DD) the date autifills correctly.

How can I ensure that the date displays in the correct format after updating and how can I ensure that the date is autofilled correctly in the modal?

Table:

    <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>

Modal:

<!--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>

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>