Vuepic / vue-datepicker

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

Text-input mode configuration 'selectOnFocus' not working with custom format #782

Closed nickvleeuwen closed 7 months ago

nickvleeuwen commented 7 months ago

Describe the bug Text-input mode configuration 'selectOnFocus' does not work when used in combination with text-input mode configuration 'format'.

To Reproduce Steps to reproduce the behavior:

Create an VueDatepicker as shown below.

<template>
    <VueDatePicker
        :week-numbers="{ type: 'iso' }"
        auto-apply
        :enable-time-picker="false"
        v-model="date"
        :format="format"
        :text-input="{
            selectOnFocus: true,
            format: 'dd-MM-yyyy'
        }"
    />
</template>

<script setup>
    const props = defineProps(['modelValue']);
    const date = ref(props.modelValue);

    const format = function(date) {
        return moment(date).format('[W]W | DD-MM-YYYY');
    }
</script>

Expected behavior When I click on de input, i see the transformed date (format dd-MM-yyyy) selected in the input.

nickvleeuwen commented 6 months ago

@Jasenkoo, Thanks for the update, it still works a bit off tho, especially when used with a different format for the text-input and normal display.

When I click the input it transforms the display format to the text-input format, then selects the text to the left of the position I clicked. But since I clicked before the transform it is hard to know what is going to selected since I can't see the transformed text. My preference would be always to select all text. That way I can just always click anywhere in the input and start typing.