kiasyn
commented
6 years ago @MIKendall I did this by storing a ref on the form (<form ref="form">) then in my onDateSelected method I submit the form on the next tick:
event.preventDefault();
this.DateRange.start = date.start;
this.DateRange.end = date.end;
this.$nextTick(() => this.$refs.form.submit());
Total Vue Noob so I apologise...
I've implemented the picker successfully into a form and have set hidden fields to update on "Apply". This appears to be successful, however the the form is POSTing BEFORE the elements are updated. The POSTing is occurring because the "Apply" button is a button and defaults to a submit action, which then triggers the form POST before the fields are updated.
I have worked around this by adding
event.preventDefault()on the onDateSelected method but it would be nice to simply have the form submitted on the "Apply" button press.I have looked at the $emit var but simply don't have enough knowledge to know whats going on or how to use it!
I would also love to know how to change the default output DateTime format that is passed from the "selectedDate" method.
Some code...
import VueRangedatePicker from 'vue-rangedate-picker'; window.Vue = require('vue'); Vue.use(VueRangedatePicker); const app = new Vue({ el: '#app', data () { return { selectedDate: { start: '', end: '' } } }, methods: { onDateSelected: function (daterange) { this.selectedDate = daterange; event.preventDefault(); document.getElementById("admin-game-search-form").submit(); } }, components: { VueRangedatePicker } })
in app.js (built using webpack), and...
in the form.
My thanks to anyone who can offer some help and of course to the author.