Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(VDateInput): parse text field value in locale aware way #19955

Open
wants to merge 6 commits into
base: dev
Choose a base branch
from

Conversation

RafalOsieka
Copy link
Contributor

@RafalOsieka RafalOsieka commented Jun 5, 2024

fixes #19803
fixes #19951

Description

Changes to the v-date-input:

  • new behavior - when text-field blur event occur, the string value is parsed back into the date object (or array of dates) - previously that was not done, which resulted in situations, where somebody typed invalid date string value into the text-field, but after unfocusing the invalid string value stayed in the text-field, but the internal model value still contains the previous date
  • blur/enter events on text-field - the string value in text-field is parsed into the Date object in the locale aware way, which resolves issue [Bug Report][3.6.4] v-date-input - polish localisation bug when pressing enter for a selected day greater than 12 #19803
  • when multiple = range, then blur/enter now correctly handles parsing, which resolves [Bug Report][3.6.8] v-date-input multiple="range" doesn't respond to text input #19951
  • when multiple = true, then blur/enter do nothing; and the v-text-field is automatically set into a readonly mode
    • this is because, the displayed value in the text field is in form {x} selected, so it makes no sense to parse that value at all into a date; this way nothing can be typed into the text field, but the end user can still select dates in the picker

The dateFromLocalizedValue function was implemented that can be reused in other places if needed. It was not implemented in the adapter, as it will break the date-io interface, so it is just an internal implementation.

Currently, that function is only supporting parsing the string value from the keyboardDate format, but if needed, it can be extended for other use cases (e.g., for future VTimeInput to support similar use case as in VDateInput)

Markup:

<template>
  <v-app>
    <v-locale-provider :locale="locales[currentLocaleIdx]">
      <v-container>
        <v-row>
          <v-col cols="12">
            <v-btn @click="toggleLocale">Toggle locale</v-btn>
            <span class="ml-3">Locale: {{ locales[currentLocaleIdx] }}</span>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="12">
            <v-date-input v-model="date" label="date input" />
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="12">
            <v-date-input v-model="range" label="date range input" multiple="range" />
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="12">
            <v-date-input v-model="multi" label="multiple dates input" multiple />
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="12">
            <v-date-input v-model="date" label="single date input / readonly" readonly />
          </v-col>
        </v-row>
      </v-container>
    </v-locale-provider>
  </v-app>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  const date = ref(new Date())

  const range = ref([new Date(), new Date()])
  range.value[0].setDate(range.value[0].getDate() - 1)

  const multi = ref([new Date(), new Date(), new Date()])
  multi.value[0].setDate(multi.value[0].getDate() - 2)
  multi.value[1].setDate(multi.value[1].getDate() - 1)

  const locales = ['en', 'pl', 'sv']
  const currentLocaleIdx = ref(0)

  function toggleLocale () {
    let newIdx = currentLocaleIdx.value + 1
    if (newIdx >= locales.length) newIdx = 0

    currentLocaleIdx.value = newIdx
  }
</script>

Refactored date adapter to make the Intl format options available for custom functions

resolves vuetifyjs#19803
resolved vuetifyjs#19951
@RafalOsieka
Copy link
Contributor Author

RafalOsieka commented Jun 5, 2024

This PR should be feature ready, but I still want to write some unit/e2e tests

EDIT: ready for review

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.

None yet

1 participant