Vuepic / vue-datepicker

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

dp-input slot is not change modelValue of date-picker #873

Closed OguzhanAgca closed 2 months ago

OguzhanAgca commented 2 months ago

Describe the bug Hello, when we use custom input using slot (#dp-input), datepicker's modelValue is not updated. Whether the input used is native or custom input, it does not work very well.

I looked through the documentation a lot, but I couldn't find anything regarding this situation. If this is really a bug, I am sharing screenshots below.

Also, I'm not sure, but this problem seems to be present in the example in the documentation. Dp-Input

To Reproduce Steps to reproduce the behavior:

  1. Create a datepicker component. Like:
    <VDatePicker
    v-model="model"
    v-bind="$attrs"
    auto-apply
    :min-date="minDate"
    :max-date="maxDate"
    :inline="isPartial"
    :range="isRange"
    :text-input="textInput"
    calendar-cell-class-name="date-picker-cell"
    calendar-class-name="date-picker-calendar"
    :enable-time-picker="withTime"
    >
    <template v-if="textInput" #dp-input="{ value, onInput }">
    <input
      :value="value"
      :placeholder="$attrs.placeholder"
      class="mt-1"
      @input="onInput"
    />
    </template>
    </VDatePicker>
  2. When I use this component and give textInput=true and format='yyyy-MM-dd', it creates a custom input.
  3. Select a date from the dialog that opens when we click on Input.
  4. Click on Input again and just make a small change to the date with the keyboard.
  5. Just click on an area outside of input.
  6. See the error. (The date you selected from the dialogue appeared again.)

Expected behavior When we make a change to the custom input, the modelValue in the datepicker should be updated.

Screenshots Screencast from 17-05-2024 13:52:19.webm

Desktop

Jasenkoo commented 2 months ago

The issue here is that the onFocus method is not exposed when a new version is published, you would need to connect both the onFocus and onBlur input events to be able to parse the date with auto-apply.

I should probably make docs a bit clearer :)

OguzhanAgca commented 2 months ago

The issue here is that the onFocus method is not exposed when a new version is published, you would need to connect both the onFocus and onBlur input events to be able to parse the date with auto-apply.

I should probably make docs a bit clearer :)

Thank you for your interest, I will try it when the new version is released. :)

Bowske commented 2 months ago

The issue here is that the onFocus method is not exposed when a new version is published, you would need to connect both the onFocus and onBlur input events to be able to parse the date with auto-apply.

I should probably make docs a bit clearer :)

By "connecting" you mean just using #dp-input="{ value, onInput, onBlur, onFocus }" and then simply

@input="onInput"
@focus="onFocus"
@blur="onBlur"

Damn, that would be great to have 👍

Jasenkoo commented 2 months ago

@Bowske Yes, that is correct