Reactivity of datetimepicker in vue

[owengot]

I am using the datetimepicker element in a vue application, there are a few observations / questions I have:

1. Getting the value of the date when selected from the date / time picker will not update the variable referenced in v-model on <input>
2. The only way to update the variable is to update it using an event listener, in this case close.te.datetimepicker - the dateChange.te.datetimepicker does not appear to work
3. The only way to get this value, as far as I can see, is from event.srcElement.firstChild.value - this returns a string which then has to be converted to a timestamp in my case

My question is am I missing something here, as it seems like a complex manner to get the selected date/time from the element?

Summarised code:

const myDatetimepicker = document.getElementById("myDatetimepicker");

  myDatetimepicker.addEventListener("close.te.datetimepicker", (e) => {
    console.log(e);
    date.value = e.srcElement.firstChild.value;
  });

<div
      class="relative mt-6 border-b border-white/20"
      id="myDatetimepicker"
      data-te-date-timepicker-init
      data-te-input-wrapper-init
      data-te-inline="true"
      data-te-class-notch="border-opacity-0"
      data-te-class-notch-middle="border-opacity-0"
      data-te-class-notch-end="border-opacity-0"
      data-te-class-notch-leading="border-opacity-0"
      data-te-class-notch-trailing="border-opacity-0"
    >
      <input
        type="text"
        data-te-date-timepicker-toggle-ref
        v-model="date"
        class="peer block min-h-[auto] w-full rounded border-none bg-transparent px-0 py-2 outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
      />
    </div>

This affects other elements too - like the chips input element, where the only way to update an array with the value entered is to listen to e.target.innerText - this only provides a string including the label text, that needs to be split...

  const myChips = document.getElementById("myChipsID");
  myChips.addEventListener("add.te.chips", (e) => {
    console.log(e);
    tags.value = e.target.innerText.split("\n");
  });

<div class="my-3">
      <div
        id="myChipsID"
        data-te-chips-input-init
        data-te-chips-placeholder
        class="mb-0 min-h-[45px] border-none pb-0 shadow-none outline-none transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] hover:cursor-text"
        data-te-editable="true"
      ></div>
    </div>

[juujisai]

Hi!

Since the TW Elements is a vanilla JS package, the v-model reactivity will not work there. To get the current pickers value we have to listen for events changes.

The only way to update the variable is to update it using an event listener, in this case close.te.datetimepicker - the dateChange.te.datetimepicker does not appear to work

For me the dateChange event does not work aswell. Looks like there is a mistake in docs that we will fix asap. Instead of dateChange listen for datetimeChange.te.datetimepicker. It still doesn't return a value but it will change in the new release: #2075

Listening for input changes works aswell but the event is emitted twice (once for datepicker and once for timepicker)

  myDatetimepicker.addEventListener("input", (e) => {
    console.log("input", e);
  });

The only way to get this value, as far as I can see, is from event.srcElement.firstChild.value - this returns a string which then has to be converted to a timestamp in my case
You can do that, or add Id to an input and check it's value when events are emitting.

  myDatetimepicker.addEventListener("datetimeChange.te.datetimepicker", (e) => {
    console.log(document.getElementById("form1").value);
  });