nathanreyes / v-calendar

An elegant calendar and datepicker plugin for Vue.
https://vcalendar.io
MIT License
4.38k stars 856 forks source link

Setting modelValue from outside will not update inputValue #1418

Closed Raduuu closed 9 months ago

Raduuu commented 10 months ago

Hello, I really like the plugin, however I have a question. How can I be sure to also set inputValue when modelValue from date-picker changes in this case?

<date-picker
    :value="modelValue"
    mode="dateTime"
    model-value="string"
    v-bind="datePickerProps"
    :color="selectedColor"
    :key="key"
    @update:modelValue="updateValue"
  >
    <template #default="{ inputValue, showPopover }">
      <ui-input
        :modelValue="inputValue"
      >
      </ui-input>
    </template>
  </date-picker>
Raduuu commented 9 months ago

I was setting :value="modelValue instead of :model-value="modelValue"

mreduar commented 9 months ago

I was setting :value="modelValue instead of :model-value="modelValue"

Can you please show the complete example? I am having the same problem and :model-value="modelValue" does not solve it.

Raduuu commented 9 months ago

  <date-picker
    :model-value="modelValue"
    mode="dateTime"
    v-bind="datePickerProps"
    :color="selectedColor"
    @update:modelValue="updateValue"
    timezone="UTC"
  >
    <template #default="{ inputValue, showPopover }">
      <ui-input
        :modelValue="inputValue"
        :tabindex="tabindex"
        :disabled="disabled"
        readonly
        v-bind="omit(attrs, 'datePickerProps')"
        @click="() => !disabled && showPopover()"
      >
        <template #iconRight>
          <ui-icon
            name="calendar"
            :size="24"
            @click="() => !disabled && showPopover()"
          />
        </template>
      </ui-input>
    </template>
  </date-picker>