Как динамически изменить bsConfig в BsDaterangepickerDirective (средство выбора диапазона дат NGX)

Question

Код шаблона

<input type="text" class="form-control" #drp="bsDaterangepicker" bsDaterangepicker [(bsConfig)]="customBsConfig">

Машинописный код

@ViewChild('drp') dataRangePicker: BsDaterangepickerDirective;
customBsConfig: object;

ngOnInit() {
    this.translate.use().subscribe(
        () => {
            this.customBsConfig = Object.assign({}, {
                rangeInputFormat: "MMM-dd-yyyy"
            });
            this.dataRangePicker.setConfig();
        }
    }
); 

Средство выбора диапазона дат работает нормально, но мне нужно динамически изменить bsConfig. (Здесь я использую сервис перевода ngx. Поэтому, когда языки динамически загружаются, rangeInputFormat средства выбора диапазона дат также должен применяться / обновляться). Как этого добиться? Является ли это возможным?

Answer 1

Потребовалось 3 часа отладки, чтобы найти обходной путь:

@ViewChild('dataRangePicker') dataRangePicker: BsDaterangepickerDirective;
customBsConfig: Partial<BsDatepickerConfig> = new BsDatepickerConfig();
dateRange: Date[];
range = {
    start: new Date(),
    end: new Date()
};

format = {
  "en-us" : 'MM/DD/YYYY',
  "en-gb" : 'DD/MM/YYYY',
  "ge": "DD.MM.YYYY"
};

constructor() {
    this.calanderConfigInit();
}

ngOnChanges() {
    this.translate.use().subscribe(
        (langChanged) => {
            this.calanderConfigChange();
        });
}

selectDate() {
    this.range.start = this.dateRange[0] 
    this.range.end = this.dateRange[1]
}

calanderConfigInit() {
    const langChoosen = "en-us"; // get current language;
    this.environmentBS.rangeInputFormat = format[langChoosen];
}

calanderconfigChange() {
  // clear the ngmodel of datepicker and re-assign it same values which we stored earlier during change event.
  this.dateRange = [];
  this.dateRange = [this.range.start,this.range.end];

  // required format based on condition.
  this.customBsConfig.rangeInputFormat = format[langChanged];
  this.dataRangePicker.setConfig();
}

В HTML:

<input type="text" class="class" bsDaterangepicker
       #dataRangePicker="bsDaterangepicker" [(ngModel)]="dateRange"
       (ngModelChange)="selectDate()" [maxDate]="maxDate"
       [minDate]='minDate' [bsConfig]="customBsConfig">

Answer 2

Я создал образец примера для динамического экземпляра ngx dateRangePicker.

https://stackblitz.com/edit/ngx-daterangepicker