How do I transalte the time picker?

[matsrom]

I'm using laravel with vite. I go to node_modules\tw-elements\dist\src\js\forms\timepicker\index.js and edit this part of the js:
const Default = { appendValidationInfo: true, bodyID: "", cancelLabel: "Cancel", clearLabel: "Clear", ... }

But the clear, cancel and ok buttons won't translate.

[juujisai]

Hi! When importing the tw-elements to your js, your app is using the built ES or UMD file, not the files from src folder. Thats why it won't change anything if you try to edit the Default variable.

You can change the default options via data attributes or with JS if you are initializing via JS, for example:

    <div class="relative" 
      data-te-timepicker-init 
      data-te-input-wrapper-init
      data-te-cancel-label="Cancel 2"
      data-te-clear-label="Clear 2"
      data-te-ok-label="Ok 2"
      data-te-invalid-label="Invalid 2"
      >
      <input
        type="text"
        class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] 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"
        id="form1" />
      <label
        for="form1"
        class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
        >Select a time</label
      >
    </div>

Checkout the API section of the Timepicker documentation:

https://tailwind-elements.com/docs/standard/forms/timepicker/#docsTabsAPI