How to change local for MyDatePicker-CodePudding

I am using the datepicker that can be found here https://openbase.com/js/mydatepicker.

I do not understand the instructions on how to change the local. I have imported the MyDatePickerLocaleService but I am unsure what to do with it where should I call getLocaleOptions(); ?

The service looks like this.

import { Injectable } from '@angular/core';
import { IMyLocales, IMyOptions } from 'mydatepicker';

@Injectable({
  providedIn: 'root'
})
export class MyDatePickerLocaleService {
  private locales: IMyLocales = {
    "en": {
      dayLabels: { su: "Sun", mo: "Mon", tu: "Tue", we: "Wed", th: "Thu", fr: "Fri", sa: "Sat" },
      monthLabels: { 1: "Jan", 2: "Feb", 3: "Mar", 4: "Apr", 5: "May", 6: "Jun", 7: "Jul", 8: "Aug", 9: "Sep", 10: "Oct", 11: "Nov", 12: "Dec" },
      dateFormat: "mm/dd/yyyy",
      todayBtnTxt: "Today",
      firstDayOfWeek: "mo",
      sunHighlight: true,
    },
    "he": {
      dayLabels: { su: "רא", mo: "שנ", tu: "של", we: "רב", th: "חמ", fr: "שי", sa: "שב" },
      monthLabels: { 1: "ינו", 2: "פבר", 3: "מרץ", 4: "אפר", 5: "מאי", 6: "יונ", 7: "יול", 8: "אוג", 9: "ספט", 10: "אוק", 11: "נוב", 12: "דצמ" },
      dateFormat: "dd/mm/yyyy",
      todayBtnTxt: "היום",
      firstDayOfWeek: "su",
      sunHighlight: false
    },
    //More languages
  };

  getLocaleOptions(locale: string): IMyOptions {
    if (locale && this.locales.hasOwnProperty(locale)) {
      // User given locale
      return this.locales[locale];
    }
    // Default: en
    return this.locales["en"];
  }
}

I am using the following options do I need to add the local here?

export class MyComponent implements OnInit {
      public myDatePickerOptions: IMyDpOptions = {
        // other options...
        dateFormat: 'dd-mm-yyyy',
        indicateInvalidDate: true, //Should be done in same way as config   
      };
}

mydatePicker looks like this in html

  <my-date-picker [ngClass]="{ 'is-invalid': employeeDetailForm.controls['lastMedicalVisit'].errors?.required && (employeeDetailForm.controls['lastMedicalVisit'].dirty || employeeDetailForm.controls['lastMedicalVisit'].touched) }" id="lastMedicalVisit" name="lastMedicalVisit" [options]="myDatePickerOptions" formControlName="lastMedicalVisit"  required></my-date-picker>

CodePudding user response：

You should use special input property locale (more info here: https://github.com/kekeh/angular-mydatepicker/wiki/locale-attribute)

<input angular-mydatepicker [(ngModel)]="model" 
    [options]="myDatePickerOptions" 
    #dp="angular-mydatepicker"
    [locale]="'en'">