Question

在vue js中，我想获取2个日期选择器的结果，并获取它们之间的不同日期，但是问题是我想在提交表单之前执行此操作，我的意思是当用户选择日期时我要计算日期和根据价格给出价格，我使用波斯日期选择器，如果有帮助，请在下面添加：

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

这是我的html标记：

<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>

这是vuejs部分：

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

该代码包含更多内容，因此我为了更好地阅读而对其进行了剪切和我试图使用date和date2，但它们似乎不起作用。

Answer 1

您应该可以将@change="onChange()"事件添加到日期选择器中。另外，由于每个日期选择器上都有一个v-model，因此this.date和this.date2的值应始终保持最新。然后，在onChange函数中，您应该能够访问this.date和this.date2并在那里执行日期差计算。

如果您向两个日期选择器添加相同的@change="onChange()"，则当两个日期选择器中的任何一个更改时，都将执行日期差的计算。

p.s确保您使用this.propertynamehere

访问数据

vue.js在选择后获取日期选择器的值

1 个答案: