Vue / Buefy Datetimpciker: How can I submit the results of an vue compontent to a form?

Question

For my new website project I wanted to use a datetime picker in a html form. As i use Bulma as CSS framework, I want to use the buefy datetimepicker https://buefy.org/documentation/datetimepicker, which is using vue.

For now, the datetimepicker is displayed nicely on my website, however, I am not able to receiving results when submitting the html form by a POST request.

What do I need to change to make the selected datetime available as a variable in php $_POST variable?

Code on codepen

<form action="submit.php" method="POST">
  <div id="app" class="container">
          <b-field label="Select datetime">
              <b-datetimepicker
                  rounded
                  placeholder="Click to select..."
                  icon="calendar-today"
                  :locale="locale"
                  :datepicker="{ showWeekNumber }"
                  :timepicker="{ enableSeconds, hourFormat }"
                  horizontal-time-picker>
              </b-datetimepicker>
          </b-field>
      </section>

  </div>

  <div class="field">
    <div class="control">
      <button class="button is-primary">Submit</button>
    </div>
  </div>

</form>
                
<script>
const example = {
    data() {
        return {
            showWeekNumber: true,
            enableSeconds: false,
            hourFormat: undefined, // Browser locale
            locale: undefined // Browser locale
        }
    }
}

const app = new Vue(example)
app.$mount('#app')
</script>

Answer 1

You should bind datetimepicker to a variable normally with v-model, then assign that variable to a hidden input field.

In HTML file

<input type="hidden" name="mydate" value="{{ mydate }}" />
<b-datetimepicker
    v-model="mydate"
    ...>
</b-datetimepicker>

In JS file

data() {
    ...,
    mydate: null
}