How to add new language in vuejs3-datepicker

Question

Hello is there anyone who know that how to add new custom language in vuejs3-datepicker??

Note: following doc https://www.npmjs.com/package/vuejs3-datepicker?activeTab=readme it seem to add new language in

node_modules/vuejs3-datepicker/src/components/datepicker/locale/index.ts

its so confused because i cant add new language when i deploy app to production

Is there a way to add a new language without editing the node_modules file?

Answer 1

I don't see any other simple way to achieve it without modifying the locale/index.ts file.

The languages are imported internally from the locale/index.js file by building the library

<script lang="ts">
import { defineComponent, computed, watch, ref } from 'vue';
...
import * as Langlist from './locale/index';

And then the computed property translation selects from the predefined language list.

const translation = computed(() => {
  const temp = (Langlist as any).data;
  return temp[props.language as any];
});

I don't see here any way to manipulate it.

But there are some languages defined already. Check the playground, if you language is listed.

If no, then you have to deal with updating the index.ts file or rewriting the Datepicker component.

I would rather then try to find another library. For example like this one vue3datepicker

const { createApp } = Vue;

const App = {
  components: { 
    Datepicker
  },
  data() { 
    return {
      language: 'en',
      dateSelected: null,
      defaultValue: null
    }
  }
}

const app = createApp(App)
app.mount('#app')

[v-cloak] {
  display: none;
}

<div id="app" v-cloak> 
 <label>Language:</label>&nbsp;
 <select v-model="language">
  <option v-for="lng in ['af','hi','ja','de','en','es','fr','nl','pt','it','pl','ru','tr','vn']"
     :value="lng"> 
  {{lng.toUpperCase()}}
 </option>
 </select><br/><br/>
 <datepicker ref="datepicker"
      placeholder="Select Date"
      @input="dateSelected"
      :value="defaultValue"
      :language="language" 
      inline="true"
    >
    </datepicker>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/vuejs3-datepicker@latest/dist/datepicker.min.js"></script>