CODEWITHSUNDEEP
javascriptphplaravelvue.js
Farshad
Farshad

Reputation: 2000

vuejs getting the value of a datepicker after selected

in vue js i want to get the result of 2 date-picker and get the different days between them but problem is i want to do it before form is submitted i mean when the user select dates i want to count the days and give price according to it i use a persian date picker i add it below if it may help :

https://github.com/talkhabi/vue-persian-datetime-picker

and here is my html markup :

<div class="row">
                <div class="col-lg-6">
                    <label>start reserve</label>
                    <date-picker :auto-submit="true" v-model="date" :max="available_end.toString()"
                                 :min="reserve_end.toString()"></date-picker>
                </div>
                <div class="col-lg-6">
                    <label>end reserve</label>
                    <date-picker :auto-submit="true" v-model="date2" :max="available_end.toString()"
                                 :min="reserve_end.toString()"></date-picker>
                </div>
            </div>

and here is the vuejs part :

data(){
return {
date: '',
date2:'',
}
},
 components: {
        datePicker: VuePersianDatetimePicker
    },

the code contains much more so i cut it for better reading and i tried to use the date and date2 but they dont seem to work .

Upvotes: 5

Views: 15371

Answers (1)

George the Dev
George the Dev

Reputation: 119

You should be able to add a @change="onChange()" event to your date picker. Also because you have a v-model on each date picker the values of this.date and this.date2 should be up to date at all times. Then in the onChange function you should be able to access this.date and this.date2 and perform your date difference calculation in there.

If you add the same @change="onChange()" to both date pickers then the calculation of date differences will be performed when either of them change.

p.s make sure you are accessing your data with this.propertyname

Upvotes: 2

Related Questions