Localization doesn't works?

[darkons]

Hi! Thank you so much for this awesome component. Love it!

All is working fine except localization prop. Very strange after follow docs:

<script setup>
import { ref } from 'vue'
import VueTailwindDatepicker from 'vue-tailwind-datepicker'

const dateValue = ref('')
</script>

<template>
  <VueTailwindDatepicker
     v-model="dateValue"
     as-single
     i18n="es"
     placeholder="__/__/____"
     :formatter="{
       date: 'DD/MM/YYYY',
       month: 'MMMM',
     }"    
  />
</template>

Tried some other locales but the component still displayed in english.

Thank you for your time!

[elreco]

Hello!

Thank you so much for your message.

What's your current version please? Did you install the last version of the package? (1.0.8)

[darkons]

Hello! Sorry, forgot to mention. I have just installed the package using 1.0.8 right now.

Thank you!

[elreco]

Ok nice, do you still have the issue? And also can you add a screenshot of the component pls?

[darkons]

Of course!

// package.json
"devDependencies": {
  "@inertiajs/inertia": "^0.11.0",
  "@inertiajs/inertia-vue3": "^0.6.0",
  "@inertiajs/progress": "^0.2.7",
  "@vitejs/plugin-vue": "^3.0.0",
  "@tailwindcss/forms": "^0.5.2",
  "@tailwindcss/typography": "^0.5.2",
  "dayjs": "^1.11.5",
  "laravel-vite-plugin": "^0.6.0",
  "lodash": "^4.17.19",
  "tailwindcss": "^3.1.0",
  "vue-tailwind-datepicker": "^1.0.8",
  "vue": "^3.2.31"
}

And this is my current component:

<script setup>
import VueTailwindDatepicker from 'vue-tailwind-datepicker'

const form = useForm({
  domain: '',
  expires_at: '',
})
</script>

<template>
  <AppLayout title="New domain">
    <div>
      <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
        <FormSection @submitted="submit">
          <template #title> Domain data </template>

          <div class="col-span-6">
              <InputLabel for="domain" value="Domain" />
              <TextInput
                id="domain"
                v-model="form.domain"
                type="text"
                class="block w-full mt-1"
              />
              <InputError :message="form.errors.domain" class="mt-2" />
            </div>

          <template #form>
            <div class="col-span-6">
              <InputLabel for="expires_at" value="Expires at" />
              <VueTailwindDatepicker
                v-model="form.expires_at"
                as-single
                i18n="es"
                placeholder="__/__/____"
                :formatter="{
                  date: 'DD/MM/YYYY',
                  month: 'MMMM',
                }"                
              />
              <InputError :message="form.errors.expires_at" class="mt-2" />
            </div>
          </template>

          <template #actions>
            <PrimaryButton
              :class="{ 'opacity-25': form.processing }"
              :disabled="form.processing"
            >
              Create
            </PrimaryButton>
          </template>
        </FormSection>
      </div>
    </div>
  </AppLayout>
</template>

if you need more information, don't hesitate to ask me Thanks!!

[elreco]

The months label are also not translated to es?

You can use the shortcuts options to translate the shortcut labels, you can find it here: https://vue-tailwind-datepicker.com/props.html#options

[darkons]

Months labels are not translated either. Shortcut options works as expected, but calendar locale still in english:

[elreco]

@darkons can you try now with the new 1.0.9 version please? :)

[darkons]

Working like a charm!!

Waiting for new features. This component is awesome and looks pretty :)

Thank you so much dude, saved my day!

Suggestion: formatter prop is nice for display format, but it would be great to have a key to format the model value

const formatter = ref({
  value: 'YYYY/MM/DD'
  date: 'DD MMM YYYY',
  month: 'MMM'
})

[elreco]

Ok, nice suggestion thank you. I will add it to the roadmap.