Skip to content

feat(VDatePicker): add scrollable month navigation - #22929

Merged
J-Sek merged 5 commits into
vuetifyjs:devfrom
ascott18:feat/date-picker-scrollable-gestures
Oct 18, 2026
Merged

J-Sek merged 5 commits into
vuetifyjs:devfrom
ascott18:feat/date-picker-scrollable-gestures

Conversation

@ascott18

Copy link
Copy Markdown
Contributor

Adds wheel and swipe month navigation behind the scrollable prop in VDatePickerMonth.

Updates docs and API prop copy with a new scrollable example for v-date-picker.

Description

Restores opt-in scrollable behavior that VDatePicker had in Vuetify 2, allowing for natural interactions on both desktop and mobile.

Fixes #22928
Fixes #19176

Markup:

<template>
  <v-app>
    <v-container class="py-8">
      <v-row>
        <v-col cols="12" md="6">
          <div class="text-subtitle-1 mb-2">scrollable = true</div>
          <v-date-picker
            v-model="dateA"
            scrollable
            show-adjacent-months
          />
        </v-col>

        <v-col cols="12" md="6">
          <div class="text-subtitle-1 mb-2">scrollable = false</div>
          <v-date-picker
            v-model="dateB"
            show-adjacent-months
          />
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const dateA = ref('2026-01-15')
  const dateB = ref('2026-01-15')
</script>

Adds wheel and swipe month navigation behind the scrollable prop in VDatePickerMonth, prevents page scrolling during scrollable touch interactions, and adds browser coverage for wheel and swipe behavior.

Updates docs and API prop copy with a new scrollable example for v-date-picker.

Fixes vuetifyjs#22928
@J-Sek

J-Sek commented Oct 15, 2026

Copy link
Copy Markdown
Contributor

Renamed scrollable to wheel as it is going to mirror same prop from VWindow. MD3 actually defines a scrollable/continuous variant of the picker that we may land in v4.4 or v4.5, so that prop name would be expected for that variant.

v2 accepted vertical scroll and swipe, but I don't think it is practical. It hijacks normal scroll and got me surprised/frustrated immediately. We will ship only horizontal scroll.

@J-Sek
J-Sek merged commit d5bcfd3 into vuetifyjs:dev Oct 18, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request] VDatePicker support swipe to move between months

2 participants