Vuepic / vue-datepicker

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

After placing it inside a "Label" tag, the year and month selection malfunctions. #661

Closed Opshell closed 7 months ago

Opshell commented 7 months ago

Describe the bug

When I place the "VueDatePicker" inside a "Label" tag, issues arise with the selection of the year and month. After making a selection, the year and month do not update, and the date picker automatically closes.

Tests Conducted

  1. Conducted a test using "updateMonthYear," and it successfully displays the selected year and month.
  2. Conducted a test using "handleInvalid," and no errors were reported.
  3. Functions normally when not within a "Label" tag.

To Reproduce

Steps to reproduce the behavior:

  1. declare component

    
    <script setup lang="ts">
    import { ref } from 'vue';
    
    import { str } from '@/hooks/opshellLibary';
    
    import VueDatePicker from '@vuepic/vue-datepicker';
    import type { DatePickerInstance } from "@vuepic/vue-datepicker"
    import '@vuepic/vue-datepicker/dist/main.css'
    
    const datepicker = ref<DatePickerInstance>(null);
    
    const date = ref(new Date());
    const format = (date: Date) => {
        const year = date.getFullYear();
        const month = str.strPad((date.getMonth() + 1).toString(), 2, '0');
        const day = str.strPad(date.getDate().toString(), 2, '0');
    
        return `${year}-${month}-${day}`;
    };
    
    const dateClicked = (date: Date) => {
        console.log(`Selected:${date}`);
    }
    const updateMonthYear = (date: {
        instance: number,
        month: number,
        year: number
    }) => {
        console.log('updateMonthYear:', date);
    
        datepicker.value?.setMonthYear(date);
    };
    const handleInvalid = (date) => {
        console.error('Invalid date selected:', date);
    }
    </script>

2. Place the component inside a "Label" tag
``` html
<label>
    <MoleDatePicker v-model="tempData.birth"></MoleDatePicker>
</label>
  1. Selecting the year or month. 20231124 132743
  2. See error

Desktop & Mobile (please complete the following information):

Jasenkoo commented 7 months ago

Should be ok with the new release

Opshell commented 7 months ago

Maybe not ! ! ! This problem still exists in 7.2.2, This is still the case when I test it in a clean environment! This only happens in Label tags, Could you please test it again? Grateful!!

Guito commented 1 month ago

@Jasenkoo this is still not working in 8.6.0

Jasenkoo commented 1 month ago

@Guito @Opshell , will include a patch in the next release, in the meantime, just add for="" on label tag, that should resolve it