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

[RafalOsieka]

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 - localised format support #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>

[RafalOsieka]

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

EDIT: ready for review

[reno184]

indeed, I solve the problem my local is french, thank v-locale-provider and changing the placeholder
<v-locale-provider locale="fr"> <v-date-input label="start date" placeholder="dd/mm/yyyy" v-model="item.startDate"></v-date-input> </v-locale-provider>