Submitting form with Javascript datepicker in it

I have built a form in Perch for a client which contains a <input type="date"> field. As a fallback I used the Bootstrap Datepicker for the browsers (like Safari) that don't support the date input type. The form will not get submitted in the browsers that display Bootstrap Datepicker even though I already set the field as optional. In a browser like Chrome things are working fine and the form will get send through. There are no further errors shown. The page just reloads and shows the form with the data that you just filled in.

The problem is twofold in my opinion. First I need to get the form submitted on the browsers that don't support the native date input. Then I need to capture the data from that field and send it (For which the jQuery is $("#inputWithDatePicker").data('datepicker').getFormattedDate('yyyy-mm-dd');)

I think I need to use form APi to tackle these problems but I am not sure how this needs to be implemented. Can someone help me fix this? Thanks in advance!

The code of the form:

<perch:form class="col-md-6 [ form form--footer ]" id="contact-form" method="post" action="#footer" app="perch_forms">
    <div class="box box--white" id="reserveren">

        <h2 class="heading form__heading">Reserveer uw tafel</h2>

        <small class="form__small"><perch:content id="intro" type="textarea" label="Intro" textile="true" editor="redactor" html="true" size="s" /></small>

        <fieldset class="form__fieldset">
            <legend class="form__legend">Wanneer wilt u dineren?</legend>

            <div class="form__section">
                <perch:label class="form__label" for="form-date">Datum*</perch:label>
                <perch:input class="form__input" id="form-date" type="date" placeholder="Kies een datum" name="reservation-date" label="Datum" />
                <!--<perch:error for="form-date" type="required"><span class="error">U bent vergeten een datum op te geven</span></perch:error>-->
            </div>

            <div class="form__section">
                <perch:label class="form__label" for="form-time">Tijd *</perch:label>

                <perch:input type="select" placeholder="Kies een tijd" class="form__select" id="form-time" name="reservation-time" required="true" label="Tijd" options="<perch:content type="text" id="form-time" label="Tijd" help="Vul hier alle tijden in waaruit mensen kunnen kiezen voor een reservering. Scheid iedere tijd met een komma. Voorbeeld: 17:00, 17:30, 18:00" />" />
                <perch:error for="form-time" type="required"><span class="error">U bent vergeten een tijd op te geven</span></perch:error>

            </div>

        </fieldset>

        <fieldset class="form__fieldset">
            <legend class="form__legend">Voor hoeveel personen?</legend>

            <div class="form__section">
                <perch:label class="form__label" for="form-adults">Volwassenen*</perch:label>
                <perch:input class="form__input form__input--number" id="form-adults" type="number" name="reservation-adults" label="Volwassenen" min="1" value="2" required="true" />
                <perch:error for="form-adults" type="required"><span class="error">U bent vergeten het aantal volwassenen op te geven</span></perch:error>
            </div>

            <div class="form__section">
                <perch:label class="form__label" for="form-kids">Kinderen*</perch:label>
                <perch:input class="form__input form__input--number" id="form-kids" type="number" name="reservation-kids" label="Kinderen" min="0" value="0" required="true" />
                <perch:error for="form-kids" type="required"><span class="error">U bent vergeten het aantal kinderen op te geven</span></perch:error>
            </div>
        </fieldset>

        <fieldset class="form__fieldset">
            <legend class="form__legend">Onder welke naam?</legend>
            <perch:label class="form__label" for="form-name">Naam*</perch:label>
            <perch:input class="form__input" id="form-name" type="text" name="reservation-name" label="Naam" placeholder="Voor- &amp; Achternaam" required="true"/>
            <perch:error for="form-name" type="required"><span class="error">U bent vergeten een naam op te geven</span></perch:error>
        </fieldset>

        <fieldset class="form__fieldset">
            <legend class="form__legend">Hoe bevestigen we uw reservering?</legend>

            <div class="form__section">
                <perch:label class="form__label" for="form-email">E-mail*</perch:label>
                <perch:input class="form__input" id="form-email" type="email" name="reservation-email" label="E-mail" placeholder="email@voorbeeld.com" required="true" />
                <perch:error for="form-email" type="required"><span class="error">U bent vergeten een e-mailadres op te geven</span></perch:error>
                <perch:error for="form-email" type="format"><span class="error">Voer alstublieft een geldig e-mailadres in</span></perch:error>
            </div>

            <div class="form__section">
                <perch:label class="form__label" for="form-tel">Telefoon*</perch:label>
                <perch:input class="form__input" id="form-tel" type="tel" name="reservation-tel" label="Telefoon" placeholder="telefoonnummer" required="true" />
                <perch:error for="form-tel" type="required"><span class="error">U bent vergeten een telefoonnummer op te geven</span></perch:error>
                <perch:error for="form-tel" type="format"><span class="error">Voer alstublieft een geldig telefoonnummer in</span></perch:error>
            </div>
        </fieldset>

        <fieldset class="form__fieldset">
            <legend class="form__legend">Is er verder nog iets dat wij moeten weten?</legend>

            <div class="form__section form__section--full">
                <perch:label class="form__label" for="form-message">Opmerkingen</perch:label>
                <perch:input type="textarea" class="form__input form__textarea" id="form-message" name="reservation-message" label="Opmerkingen" placeholder="Bijvoorbeeld bepaalde eetwensen of andere dingen waar we rekening mee moeten houden." />
            </div>
        </fieldset>

        <small class="form__small"><perch:content id="extras" type="textarea" label="Additionele informatie" textile="true" size="s" /></small>


        <perch:input type="submit" id="submit" class="btn btn--full"  value="Reserveer" />

        <perch:success>
            <div class="col-md-6 box box--white form__succes">
                <perch:content id="success" type="textarea" label="Succes notificatie"  help="Notificatie bij het succesvol verzenden van het formulier" textile="true" size="s" />
            </div>
        </perch:success>

    </div>
</perch:form>

And that of the e-mail template:

<html>
<head>
    <title><perch:email id="email_subject" /></title>
  <style>
    tr {
      padding-bottom: 12px;
    }
    th {
      text-align: left;
    }

    td {
      padding-left: 24px;
    }
  </style>
</head>
<body>
  <h1>Reservering</h1>
  <p><perch:email id="email_message" encode="false" /></p>
  <table>

    <tr>
      <th>Datum:</th>
      <td><perch:email id="form-date" /> </td>
    </tr>

    <tr>
      <th>Tijd:</th>
      <td><perch:email id="form-time" /></td>
    </tr>

    <tr>
      <th>Aantal Volwassenen:</th>
      <td><perch:email id="form-adults" /></td>
    </tr>

  <tr>
    <th>Aantal kinderen:</th>
    <td><perch:email id="form-kids" /></td>
  </tr>

  <tr>
    <th>Naam:</th>
    <td><perch:email id="form-name" /></td>
  </tr>

  <tr>
    <th>E-mailadres:</th>
    <td><perch:email id="form-email" encode="false" /></td>
  </tr>

  <tr>
    <th>Telefoonnummer:</th>
    <td><perch:email id="form-tel" /></td>
  </tr>

  <tr>
    <th>Opmerkingen:</th>
    <td><perch:email id="form-message" encode="false"/></td>
  </tr>

  </table>
</body>
</html>

Sadly the website is live with this bug in it: https://sijs-etenendrinken.nl/#footer