Vuetify - DatePicker 仅 select 两个日期

Question

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

Answer 1

一个简单的 hack 可以使用 range 而不是 multiple 因为最后 dates array 在使用 range.[=14= 时只有两个日期]

Answer 2

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

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

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

Answer 3

在这种情况下使用 range。另外，我想提一下我在右边 order.For 示例中用来排列日期的方法，点击日期 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(' ~ ')
    },
},

Vuetify - DatePicker 仅 select 两个日期

Vuetify - DatePicker to select two dates only

datepicker

vue.js

vuetify.js