How do I change the way the date and time inputs submit to the json file?

[RealImmortal2004]

I have an attendance form that I'm using and I can't figure out how to send it to the json file so that the format for the date input is displayed in the file as: MM/DD/YYYY and the time format in 12 hour format and add either AM or PM depending on the time of day. My code below is what I've tried so far but I can't seem to figure out how to get it to work correctly.

<form method="post" action="aimee-pelletier-submit-attendance.php" target="Right">
        <div id="form_page">
            <div id="form_body">
                <div class="row-a">
  <div class="column-a" style="background-color:transparent;">
  <div id="input_date" style="margin-left:-25px" class="input">
                    <input id="Date" style="font-family: -apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; width:100%" type="date"
                        placeholder="Date" name="Date"
                        required>
                </div>
    <script type="text/javascript">
function getDate()
{
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January is 0!
    var yyyy = today.getFullYear();
    if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm}
    today = mm+"/"+dd+"/"+yyyy;

    document.getElementById("Date").value = today;
}

//call getDate() when loading the page
getDate();

function fillTimeField() {
  var timeField = document.getElementById("Time");
  var date = new Date();
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var ampm = hours >= 12 ? 'PM' : 'AM';
  hours = hours % 12;
  hours = hours ? hours : 12; // the hour '0' should be '12'
  minutes = minutes < 10 ? '0'+minutes : minutes;
  var time = hours + ':' + minutes + ' ' + ampm;
  timeField.value = time;
}

  fillTimeField();
 
</script>
  </div>
  <div class="column-a" style="background-color:transparent;">
    <div id="input_time" class="input">
                    <input id="Time" style="font-family: -apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; width:100%" type="time"
                        placeholder="Time" name="Time"
                        required>
  </div>
  </div>
    <div class="row-a">
  <div class="column-a" style="background-color:transparent;">
  <div id="input_status" class="input" style="margin-left:-25px">
    <select name="Status" id="Status" required>
    <option selected disabled>Select status</option>
    <option value="Present">Present</option>
    <option value="Tardy">Tardy</option>
    <option value="Unexcused">Unexcused Absence</option>
    <option value="Excused">Excused Absence</option>
    <option value="None">None</option>
  </select>
                </div>
  </div>
  <div class="column-a" style="background-color:transparent;">
    <div id="input_program" class="input">
    <select id="Program2" name="Program" required><option selected disabled>Select a program</option></select>
                </div>
   </div>
  </div>
                </div>
        <br><br>
             </div>
        </div>
      <div class="id input">
                    <input id="submit" style="padding:2px 2px; float:right" onclick="refreshIframe();" type="submit"
                        name="submit" value="Submit attendance">
<button id="close-modal-btn" style="padding:2px 2px; margin-right:5px; float:right" type="button">Close</button>
        
                </div>
    </form>