Skip to content

locale is not used when formatting with textInput.format #1286

Description

@odzhychko

Describe the bug

When the users focuses the text input and textInput.format is set, the formatting ignores the provided locale.

To Reproduce

<script setup lang="ts">
import { ref, computed } from 'vue';
import { VueDatePicker } from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';
import { de } from 'date-fns/locale';

const date = ref(new Date());
</script>

<template>
  <div>
    <div>
      <VueDatePicker
        v-model="date"
        :locale="de"
        auto-apply
        :textInput="{ format: 'dd LLLL yyyy HH:mm' }"
        :formats="{ input: 'dd LLLL yyyy HH:mm' }"
      />
    </div>
  </div>
</template>

Steps to reproduce the behavior:

  1. Click on the date picker.
  2. See input text updating and using the locale enUS.

Expected behavior

The input text should not update and keep using the provided locale (de in this example).

Screenshots

Screencast.From.2026-06-23.14-39-24.mp4

Desktop & mobile (please complete the following information):

  • Chromium 149 (Desktop)
  • Firefox 152 (Desktop)
  • Others I have not tested

Version

  • The example above was reproduced with v14.0.0
  • Similar behavior was observed in v11.0.3

Metadata

Metadata

Assignees

No one assigned

    Labels

    awaiting triageThe issue is not reviewed by the maintainersbugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions