vuejs在选择后获取日期选择器的值

Posted 2023-02-22

【中文标题】vuejs在选择后获取日期选择器的值

【英文标题】：vuejs getting the value of a datepicker after selected

【发布时间】：2019-08-20 10:43:55

【问题描述】：

在 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 但它们似乎不起作用。

【问题讨论】：

我猜，你可以使用计算属性来实现它。请添加您到目前为止尝试执行的代码。

我真的不知道如何得到我刚刚尝试过 this.dateDiff = this.value this.$emit('input', this.dateDiff)

【参考方案1】：

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

如果您将相同的@change="onChange()" 添加到两个日期选择器，那么当它们中的任何一个发生更改时，将执行日期差异的计算。

p.s 确保您使用 this.propertyname 访问您的数据