[Feature request] Daterange picker in pop up menu

[hannonq]

Hi, first of all, nice component!

I was wondering if there is a way to use it as a pop up menu, like the official date picker from Vuetify.

Ideally, the menu will only show up when the user clicks on the input field to change the date.

Thanks!

[praveenpuglia]

Can you please tell me exactly which demo you are talking about so I can understand the request better?

BTW, I have used it in a menu in one of my apps as below.

<v-menu full-width offset-y :close-on-content-click="false" v-model="dateMenu" bottom>
    <v-btn color="primary" block outline slot="activator">{{startDateDisplay}} &mdash; {{endDateDisplay}}</v-btn>
    <v-card>
        <v-card-text>
            <DateRange @input="onDateRangeChange" :options="dateRangeOptions"></DateRange>
        </v-card-text>
    </v-card>
</v-menu>

startDateDisplay & endDateDisplay are two computed properties which return the dates in a desirable format for the user to see.

startDateDisplay () {
    return format(new Date(this.startDate), 'MMM D, YYYY')
}
endDateDisplay () {
    return format(new Date(this.endDate), 'MMM D, YYYY')
}

[hannonq]

Thanks for the quick reply.

I was referring to this example, but the code snippet you posted above does the trick very easily.

I'm a complete newbie in Vuejs (and fairly new to Javascript), so I didn't manage to put that together myself.

Since I'm happy with the proposed solution, I'll close this issue for now. And I would suggest that you put this nice example also in the usage guide, since this is a very common need (Just realized that issue #18 is exactly this suggestion)

[praveenpuglia]

@hannonq the latest demo now includes the menu example at the bottom. :)

[hannonq]

Awesome :) Thanks @praveenpuglia !