Skip to content

feat(VDatePicker): add scrollable month navigation#22929

Open
ascott18 wants to merge 1 commit into
vuetifyjs:devfrom
ascott18:feat/date-picker-scrollable-gestures
Open

feat(VDatePicker): add scrollable month navigation#22929
ascott18 wants to merge 1 commit 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
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.

1 participant