Element: Datepicker is showing Days & month names in chinese, how can i make that to english?

[kamalakarchagam]

first of all , element ui is great library, it's saving my day of work. i'm really thankful to the team behind it.

I am trying to use date picker, the output is as show in below.

here bit weird thing i observed related to day , month names
the following things are getting displayed in chinese
1) month name
2) current date ( say today is 18, so 18 th is always in chinese )
3) day name

how would i make those things to appear in english?

[QingWei-Li]

install vue-i18n

demo

import Vue from 'vue';
import App from './app';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-default/index.css';
import i18n from 'vue-i18n';

Vue.use(i18n);
Vue.use(ElementUI);
Vue.config.lang = 'en';
Vue.locale('en', {
  datepicker: {
    now: 'now',
    today: 'today',
    cancel: 'cancel',
    clear: 'clear',
    confirm: 'confirm',
    selectDate: 'selectDate',
    selectTime: 'selectTime',
    startTime: 'startTime',
    endTime: 'endTime',
    year: 'year',
    month: 'Month',
    week: 'week',
    weeks: {
      sun: 'sun',
      mon: 'mon',
      tue: 'tue',
      wed: 'wed',
      thu: 'thu',
      fri: 'fri',
      sat: 'sat'
    },
    months: {
      jan: 'jan',
      feb: 'feb',
      mar: 'mar',
      apr: 'apr',
      may: 'may',
      jun: 'jun',
      jul: 'jul',
      aug: 'aug',
      sep: 'sep',
      oct: 'oct',
      nov: 'nov',
      dec: 'dec'
    }
  }
});

new Vue({ // eslint-disable-line
  el: '#app',
  render: h => h(App)
});

[kamalakarchagam]

thank you @QingWei-Li .. it's working :+1: :)

[kamalakarchagam]

once i upgraded this to 1.0.0.-rc.8 , the display is unexpected , as follows

[kamalakarchagam]

ond some other useful info for the above issue

[QingWei-Li]

I updated the filed name. But now, you just import the locale file. Such as

import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'
import Vue from 'vue'

Vue.use(ElementUI, { locale })

[Leopoldthecoder]

Will add an English documentation on how to apply i18n soon.

[markadrake]

Nevermind - reading the docs works best sometimes!

[amitsaini5876]

go to file lib>locale>index.js
Change this
_var _zhCN = require('element-ui/lib/locale/lang/zh-CN');_
to
var _zhCN = require('element-ui/lib/locale/lang/en');

[Gsubha]

///css/bootstrap-datepicker.css
//https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"
//js/bootstrap.min.js
/js/bootstrap-datepicker.min.js

It works for me

[gustawdaniel]

Anyway chinese signs should not be rather default.

[factreset]

I'm using the locale as described by @QingWei-Li above, but the month still does not display next to the year in the datepicker's header. Obviously this is problematic as the user won't be able to tell which month they're selecting a day from.

[nelsonSetyawan09]

how i can cutom styling datepicker, like background-color, color for the all element like icon, button, text

[Phumbie]

install vue-i18n

demo

import Vue from 'vue';
import App from './app';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-default/index.css';
import i18n from 'vue-i18n';

Vue.use(i18n);
Vue.use(ElementUI);
Vue.config.lang = 'en';
Vue.locale('en', {
  datepicker: {
    now: 'now',
    today: 'today',
    cancel: 'cancel',
    clear: 'clear',
    confirm: 'confirm',
    selectDate: 'selectDate',
    selectTime: 'selectTime',
    startTime: 'startTime',
    endTime: 'endTime',
    year: 'year',
    month: 'Month',
    week: 'week',
    weeks: {
      sun: 'sun',
      mon: 'mon',
      tue: 'tue',
      wed: 'wed',
      thu: 'thu',
      fri: 'fri',
      sat: 'sat'
    },
    months: {
      jan: 'jan',
      feb: 'feb',
      mar: 'mar',
      apr: 'apr',
      may: 'may',
      jun: 'jun',
      jul: 'jul',
      aug: 'aug',
      sep: 'sep',
      oct: 'oct',
      nov: 'nov',
      dec: 'dec'
    }
  }
});

new Vue({ // eslint-disable-line
  el: '#app',
  render: h => h(App)
});

how would i covert this to nuxt

[gokhantaskan]

I use Vue-i18n and here is what I did:

// App.vue

<script>
import eLocale from "element-ui/lib/locale";
import langEn from "element-ui/lib/locale/lang/en";
import langTr from "element-ui/lib/locale/lang/tr-TR";
...

mounted() {
  ...
  const stateLocale = this.$store.state.locale;
  eLocale.use(stateLocale === "en-US" ? langEn : langTr);
}

this.$store.state.locale is arranged by i18n and returns "en-US" or "tr-TR", so you do not have to set locale in element.js file.