Vuetify - DatePicker 仅选择两个日期答案

【问题标题】：Vuetify - DatePicker to select two dates onlyVuetify - DatePicker 仅选择两个日期
【发布时间】：2020-11-25 04:53:49
【问题描述】：

我有多个属性的 v-date-picker。是否可以将日期选择器限制为仅选择 2 个日期。请帮帮我。

【问题讨论】：

标签： vue.js datepicker vuetify.js

【解决方案1】：

使用range 在这种情况下有效。另外，我想提一下我用来按正确顺序排列日期的方法。例如，单击日期 2020-03-29 然后单击 2020-03-23 将显示 2020-03-29 ~ 2020-03-23.

<v-menu
    ref="menu"
    v-model="menu"
    :close-on-content-click="false"
    :return-value.sync="dates"
    transition="scale-transition"
    offset-y
    min-width="auto"
>
    <template v-slot:activator="{ on, attrs }">
        <v-text-field
            v-model="dateRangeText"
            label="Picker in menu"
            prepend-icon="mdi-calendar"
            readonly
            v-bind="attrs"
            v-on="on"
        ></v-text-field>
    </template>
    <v-date-picker
        v-model="dates"
        range
        no-title
        scrollable
        :min="new Date().toISOString().substr(0, 10)"
    >           
    </v-date-picker>
</v-menu>

到目前为止我发现的最简单的方法是编写一个条件来检查v-text-field

computed: {
    dateRangeText () {
        if (Date.parse(this.dates[1]) < Date.parse(this.dates[0])) {
                let temp = this.dates[1]
                this.dates[1] = this.dates[0]
                this.dates[0] = temp
        }
        return this.dates.join(' ~ ')
    },
},

【讨论】：

【解决方案2】：

您可以使用range，然后将规则添加到您的v-date-picker 模板（例如v-text-field）。因此，如果用户输入不合适，它将返回错误。试试这个规则：

visitDate: [v => this.date[0] <= this.date[1] || "Finish Date can't be earlier than Start Date"].

源代码：https://vuetifyjs.com/en/components/date-pickers/

【讨论】：

我应该在 v-date-picker 上给出这个？
vuetifyjs.com/en/components/date-pickers/#date-pickers-range 查看此文档。在v-text-field 你可以应用规则。
您可以将您的v-date-picker 包裹在v-menu 上。 vuetifyjs.com/en/components/date-pickers/… 喜欢这个文档。因为v-date-picker 没有规则道具，您需要使用v-text-field 包装它。
所以我必须把这个设置为规则。对
正确。在v-text-field 上设置规则，或者如果您不想使用v-text-field，则可以在范围日期上使用计算属性，如果输入不符合要求，则返回 false。

【解决方案3】：

一个简单的技巧可能是使用range 而不是multiple，因为最后dates array 在使用range 时只有两个日期。

【讨论】：

当我尝试 Range 时，日期是根据用户兴趣选择的。如果用户首先点击日期 05-08-2020，然后点击日期 01-08-2020，文本将显示为 05-08-2020 ~ 01-08-2020。我怎样才能让 01-08-2020 首先出现。
在将日期加入计算属性之前尝试对日期进行排序