DateRangePicker on Laravel Vue Not Setting Value to Vue Model

[geraldmacasaet]

I tried using the DateRange Picker in my LaraVue project but I just can't seem to get the value of the datepicker to my vue model.

<div>
  <InputLabel value="Select Date" class="mb-1" />
   <div date-rangepicker id="dateRangePickerId" class="inline-flex items-center w-full">
     <div class="relative w-full">
        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
            <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true"  xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                     <path
                                            d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                    </svg>
                                </div>
                                <input type="text" datepicker-autohide v-model="form.when_start"
                                    :class="form.errors.when_start ? 'border-red-500' : ''"
                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-[#0032A0] focus:border-[#0032A0] block w-full pl-10 p-2.5  dark:bg-transparent dark:border-gray-400 dark:placeholder-gray-400 dark:text-white dark:focus:ring-[#0032A0] dark:focus:border-[#0032A0]"
                                    placeholder="Select date start">
                            </div>
                            <span class="mx-4 text-gray-500">to</span>
                            <div class="relative w-full">
                                <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                    <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true"
                                        xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                    </svg>
                                </div>
                                <input type="text" datepicker-autohide v-model="form.when_end"
                                    :class="form.errors.when_end ? 'border-red-500' : ''"
                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-[#0032A0] focus:border-[#0032A0] block w-full pl-10 p-2.5  dark:bg-transparent dark:border-gray-400 dark:placeholder-gray-400 dark:text-white dark:focus:ring-[#0032A0] dark:focus:border-[#0032A0]"
                                    placeholder="Select date end">
                            </div>
                        </div>
                        {{ form.when_start }}
                        {{ form.when_end }}
                        <InputError :message="form.errors.when_start" />
                        <InputError :message="form.errors.when_end" />
                    </div>

Any workaround?

[Bruck-3]

you can use the ref property. something like this input ref="datepicker" then this.$refs.datepicker.value will get you the value.