Ngx-bootstrap: Daterangepicker initial value wrong pattern locale

[jcebidanes]

Bug description or feature request:

I set my locale to ptBr. It's working, but while I add initial value in dateRangePicker this value show wrong.
If I select date value manualy pattern locale working perfectly.

Same error with datapicker, but I add pipe date and resolve, but to dateRangePicker I don't know who add de pipe date.

With palliative working to simple datapicker

<input  type="text" class="form-control" formControlName="birthday" bsDatepicker 
[bsConfig]="bsConfig" [(bsValue)]="birthday" value="{{dataNascimento | date:'dd/MM/yyyy' }}" />

Config

import { Injectable } from 'angular/core';

import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { defineLocale } from 'ngx-bootstrap/bs-moment';
import { ptBr } from 'ngx-bootstrap/locale';

@Injectable()
export class ConfigService {

  public bsConfig: Partial<BsDatepickerConfig>;

  constructor() {
    // Configuracao para o datapicker
    defineLocale('ptBr', ptBr);
    this.bsConfig = Object.assign({},
      {
        locale: 'ptBr',
        containerClass: 'theme-dark-blue',
        showWeekNumbers: false,
        maxDate: new Date()
      }
    );
  }

  // Configuracao para o datapicker
  getBsConfig() {
    return this.bsConfig;
  }
}

Template

<input class="form-control" #drp="bsDaterangepicker" bsDaterangepicker [bsConfig]="bsConfig" 
[maxDate]="bsConfig.maxDate" [(bsValue)]="periodo" />

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 2.0.0-beta.8

Angular: 5.0.0

Bootstrap: 3.3.7

Build system: Angular CLI 1.5.2

[valorkin]

yes, it was. Thanks again for reporting nicely formatted issues! keep on :)
it should be fixed in just released [email protected]
please confirm

[jcebidanes]

Unfortunately not fix in beta9.
I try resolve add rangeInputFormat in bsconfig with palliative, but only work while I select date manualy.

Some settings are apparently only being applied after you have manually selected the date.

My congif

bsConfig = Object.assign({},
      {
        maxDate: new Date(),
        showWeekNumbers: false,
        rangeSeparator: ' || ',
        locale: 'ptBr',
        containerClass: 'theme-dark-blue',
        rangeInputFormat : 'DD-MM-YYYY'
      }
    );

Properties showWeekNumbers, locale and containerClass are applyed in load component.
Properties maxDate, rangeSeparatorand and rangeInputFormat are applyed after I select manualy the date.

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 2.0.0-beta.9
Angular: 5.0.3
Build system: Angular CLI 1.5.2

[ayyash]

I'm having the same issue, the configuration is ignored when [(bsValue)] is set, until a change occurs

[bjansen]

It looks like BsDaterangepickerInputDirective is using this._picker._config.dateInputFormat instead of this._picker._config.rangeInputFormat to parse dates once they are modified:

https://github.com/valor-software/ngx-bootstrap/blob/5c2aa9e/src/datepicker/bs-daterangepicker-input.directive.ts#L144

As a workaround, specifying both rangeInputFormat and dateInputFormat at the same time (with the same value) works for me.

@valorkin do you want me to make a PR?

[valorkin]

Sure :+1:

[bjansen]

Oh, the original problem is different, and can also reproduce it: bsValue seems to be initialized before bsConfig, which means that initial values will be displayed using the default date format ('L'). I'm not sure how this can be fixed, though :/