Vuepic / vue-datepicker

Datepicker component for Vue 3
https://vue3datepicker.com
MIT License
1.43k stars 142 forks source link

Validation does not kick in range mode with text input #837

Closed dvuckovic closed 4 months ago

dvuckovic commented 4 months ago

Describe the bug When the datepicker is running in range mode with text input enabled, the emitted value can be set to an invalid range (i.e. the start date is after the end date).

To Reproduce Steps to reproduce the behavior in this Playground:

  1. Focus the input field
  2. Enter an invalid range in form of start and end date, i.e. 2024-04-17 - 2024-04-01
  3. Press Enter key (or click Select button in the overlay)
  4. Confirm that the emitted value contains an invalid range (the start date is after the end date).

Expected behavior The datepicker should not emit an invalid range, but possibly clear it.

Screenshots

Screenshot 2024-04-17 at 11 57 52

Desktop & mobile (please complete the following information):

Playground:

https://stackblitz.com/edit/vuepic-vue-datepicker-2whhby?file=src%2Fcomponents%2FPlayground.vue

<template>
  <div>
    <Datepicker
      v-model="date"
      :enable-time-picker="false"
      model-type="yyyy-MM-dd"
      format="yyyy-MM-dd"
      range
      text-input
    />
    <pre>{{ date }}</pre>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Datepicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';

const date = ref();
</script>