V-calendar: Using Vuetify v-text-field instead of html input

[GaborTorma]

Is it posstible to use v-text-field from Vuetify for input fields?

My code:

<vue-date-picker
    v-model="range"
    mode="dateTime"
    :masks="masks"
    is-range
    is24hr
>
    <template v-slot="{ inputValue, inputEvents }">
        <v-text-field
            :value="inputValue.start"
            prepend-icon="$datetime"
            v-on="inputEvents.start"
        />
        <v-text-field
            :value="inputValue.end"
            prepend-icon="$datetime"
            v-on="inputEvents.end"
        />
    </template>
</vue-date-picker>

I got the following error message when I write any character into input (event: onInput):

client.js:97 TypeError: Cannot read property 'value' of undefined
    at v-calendar.umd.min.js:1
    at invokeWithErrorHandling (vue.runtime.esm.js:1854)
    at VueComponent.invoker (vue.runtime.esm.js:2179)
    at invokeWithErrorHandling (vue.runtime.esm.js:1854)
    at VueComponent.Vue.$emit (vue.runtime.esm.js:3888)
    at VueComponent.set [as internalValue] (VTextField.ts:148)
    at VueComponent.onInput (VTextField.ts:461)
    at invokeWithErrorHandling (vue.runtime.esm.js:1854)
    at HTMLInputElement.invoker (vue.runtime.esm.js:2179)
    at HTMLInputElement.original._wrapper (vue.runtime.esm.js:6917)

[GaborTorma]

Can anybody help my for solve this issue?

[4KDA]

+1
same problem

[reenekt]

@GaborTorma @4KDA inputEvents is used for simple <input> tag. see here and here
so you shoul use inputEvents.input for input event and if you want to use value instead e.target.value you sould use updateValue method instead inputEvents (see here, here and here for details)

[nathanreyes]

Thanks @reenekt for your help here. I might add that the docs might also help provide a bit of direction here as to binding non non-input elements, what events are bundled in inputEvents and how you can use the updateValue function to customize when and how the value is updated.

I'll try and get a sandbox demo working for you all.

https://vcalendar.io/datepicker.html#advanced-slots

[GaborTorma]

Sandbox demo will very helpful. Thanx!

[nathanreyes]

Ok I think this might get you started. This is just a form example I found for Vuetify. I've never used Vuetify so this could maybe be improved?

This just toggles the popover on click, but you could adjust this for focus or hover if you would like.

https://codesandbox.io/s/veevalidate-components-vuetify-forked-o7fdt?file=/src/components/Form.vue:1001-2109

          <v-date-picker v-model="birthdate" ref="picker">
            <template #default="{ inputValue, togglePopover, updateValue }">
              <ValidationProvider name="birthdate" rule="required">
                <v-text-field
                  :value="inputValue"
                  label="Birthdate"
                  required
                  ref="birthdate"
                  @click="
                    togglePopover({
                      placement: 'bottom-start',
                      ref: $refs.birthdate.$refs.input, // DOM element to adjust to
                    })
                  "
                  @input="
                    updateValue($event, {
                      formatInput: false,
                      hidePopover: false,
                      debounce: 150, // millisecond debounce as user is typing
                    })
                  "
                  @change="
                    updateValue($event, {
                      formatInput: true,
                      hidePopover: false,
                    })
                  "
                >
                </v-text-field>
              </ValidationProvider>
            </template>
          </v-date-picker>

export default {
  data() {
    return {
      birthdate: null,
    }
  },
  watch: {
    birthdate() {
      this.$refs.picker.adjustPageRange(true);
    },
  }
}

[nathanreyes]

Admittedly, this could be improved by providing a custom way to extract the event value or target a DOM reference element to position with.

Noted for future versions.

[GaborTorma]

Thanx for the sandbox code.

I found two issue in when we works with disabled-dates. You can check my fork of sandbox: https://codesandbox.io/s/veevalidate-components-vuetify-forked-xqw65?file=/src/components/Form.vue

Issues:

1. when i click a disabled day, like 2020-12-04, the calendar become hidden
2. i can select some a disabled days (24, 27).

my disabled-dates object is:

:disabled-dates="[
    {
        start: null,
        end: new Date('2020-12-04'),
    },
    {
        start: new Date('2020-12-27'),
        end: null,
    },
    new Date('2020-12-24'),
]"

[nathanreyes]

@GaborTorma No problem. Regarding your issues:

1. I was able to replicate and will add this to the bug list.
2. Should be fixed with 2.1.2.

I'm going to close this issue as technically there is a solution (albeit not the most optimal). I'll be brainstorming the best way to remedy usage with input component wrappers.