ng2-ui / datetime-picker

Angular2 DateTime Picker
https://ng2-ui.github.io/#/datetime-picker
MIT License
121 stars 62 forks source link

How do I change the control's language in Runtime #169

Closed tossp closed 7 years ago

tossp commented 7 years ago

not work https://plnkr.co/edit/jnR8xnbV7zZioGW66MnN?p=preview

allenhwkim commented 7 years ago

Do you want to change language dynamically without reloading the app? If so, I don't see that much use case. What use case do you have to change language dynamically without reloading the app?

tossp commented 7 years ago
  1. i18n plugin @ngx-translate/core
  2. I have an idea, but need to modify a lot of places, afraid you do not receive PR

The following is my program code, I hope to express my ideas

//Do not need to manually modify the HTML
//Just need to used --> npm install moment --save 
import * as moment from 'moment';

@Injectable()
export class TsService {
  constructor(private translate: TranslateService) {
    this.tsLang = this.tsLang;
  }

  get tsLang(): string {
    let lang = localStorage.getItem(this.data.LangKeyName);
    if (!lang) {
      lang = this.translate.getBrowserLang() || 'zh';
      this.tsLang = lang;
    }
    return lang;
  }

  set tsLang(v: string) {
    if (!this.lang[v]) {
      return
    }
    localStorage.setItem(this.data.LangKeyName, v);
    this.translate.use(v);
    moment.locale([v, this.translate.getBrowserLang().toLowerCase(), this.translate.getBrowserCultureLang().toLowerCase()]);

   console.debug('tsLang', moment.locale());
   //console output: tsLang en

    console.debug('tsLang', moment.localeData());
   //!!!!!!Here to get the localeData!!!!!!
   //console output: tsLang {"_calendar":{"sameDay":"[Today at] LT","nextDay":"[Tomorrow at] LT","nextWeek":"dddd [at] LT","lastDay":"[Yesterday at] LT","lastWeek":"[Last] dddd [at] LT","sameElse":"L"},"_longDateFormat":{"LTS":"h:mm:ss A","LT":"h:mm A","L":"MM/DD/YYYY","LL":"MMMM D, YYYY","LLL":"MMMM D, YYYY h:mm A","LLLL":"dddd, MMMM D, YYYY h:mm A"},"_invalidDate":"Invalid date","_ordinalParse":{},"_relativeTime":{"future":"in %s","past":"%s ago","s":"a few seconds","m":"a minute","mm":"%d minutes","h":"an hour","hh":"%d hours","d":"a day","dd":"%d days","M":"a month","MM":"%d months","y":"a year","yy":"%d years"},"_months":["January","February","March","April","May","June","July","August","September","October","November","December"],"_monthsShort":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"_week":{"dow":0,"doy":6},"_weekdays":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"_weekdaysMin":["Su","Mo","Tu","We","Th","Fr","Sa"],"_weekdaysShort":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"_meridiemParse":{},"_abbr":"en","_config":{"calendar":{"sameDay":"[Today at] LT","nextDay":"[Tomorrow at] LT","nextWeek":"dddd [at] LT","lastDay":"[Yesterday at] LT","lastWeek":"[Last] dddd [at] LT","sameElse":"L"},"longDateFormat":{"LTS":"h:mm:ss A","LT":"h:mm A","L":"MM/DD/YYYY","LL":"MMMM D, YYYY","LLL":"MMMM D, YYYY h:mm A","LLLL":"dddd, MMMM D, YYYY h:mm A"},"invalidDate":"Invalid date","ordinalParse":{},"relativeTime":{"future":"in %s","past":"%s ago","s":"a few seconds","m":"a minute","mm":"%d minutes","h":"an hour","hh":"%d hours","d":"a day","dd":"%d days","M":"a month","MM":"%d months","y":"a year","yy":"%d years"},"months":["January","February","March","April","May","June","July","August","September","October","November","December"],"monthsShort":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"week":{"dow":0,"doy":6},"weekdays":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"weekdaysMin":["Su","Mo","Tu","We","Th","Fr","Sa"],"weekdaysShort":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"meridiemParse":{},"abbr":"en"},"_ordinalParseLenient":{}}

    console.debug('tsLang', moment.months());
   //console output:tsLang ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]0: "January"1: "February"2: "March"3: "April"4: "May"5: "June"6: "July"7: "August"8: "September"9: "October"10: "November"11: "December"

    console.debug('tsLang', moment.weekdays());
    //console output: tsLang ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] 

    console.debug('tsLang', moment.weekdaysShort());
    //console output: tsLang ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]

    console.debug('tsLang', moment.weekdaysMin());
   //console output: tsLang ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]

    console.debug('tsLang', moment.locales());
   //console output: tsLang ["en", "zh-cn"]
  }

Hope that the above code to express my ideas clearly

Finally, thank you very much for your work

allenhwkim commented 7 years ago

Closing it for now as 'wont fix'. Please continue discussion if this feature is required.