ngx-bootstrap: Datepicker showing 'Invalid date' on ISO date from server.

Having the same issue. Using new Date() does make it display correctly but also make the form control value an Object which then causes problems when submitting the form.

The only way I’ve found to make it work correctly is to use the date pipe on the value.

<input class="form-control" placeholder="End date" bsDatepicker #dp_end="bsDatepicker" formControlName="end_date" value="{{group.controls['end_date'].value | date: 'dd/MM/yyyy'}}" [bsConfig]="bsConfig">

+1

Any update on this issue? datepicker used to allow setting ISO string as the ngModel value… why has this been changed? Requires an unnecessary rewrite to instantiate the date object…

Solved with date pipe

[ngModel]="user.birthDate | date: 'MM/dd/yyyy'"

but when i try using | date: 'yyyy-MM-dd' not worked, this format get default browser date format in type="date" and here it doesn’t work seriously interesting if it did

in my case, I had to add a redundant timepicker like so

<timepicker [(ngModel)]="license.expiry_date" [ngModelOptions]="{standalone: true}" style="display: none;"></timepicker>

I solved this problem by creating my own date picker component that wraps ngx-bootstrap version and handles conversion from string to date. However this feature should indeed be included in ngx-bootstrap component itself. I was really surprised it hasn’t been done already.

Hi guys

All your answers is wrong!!!

For example , we have customized EN->RU locale:

Yes sure,it’s not interesting for us.

Angular any time supported: string->date->string->any and conversely!

We can anything do it with moment package : date<->string conversion.

TS

declare var moment: any;

 @Component({...


//or string
dateOfBirth:Date; 

// customized config
  datePickerConfig = {
    dateInputFormat: 'DD.MM.YYYY',
    containerClass: 'theme-red',
    isAnimated: true,
    adaptivePosition: true
  };

//manullay set locale id
 constructor( 
    private localeService: BsLocaleService
  ) {
    this.localeService.use('ru');
  }

loadProfile(){
.....subscribe(value=>{

//value obj in [dateofbirth] property is string or date not diff have for moment 
// format -> DD/MM/YYYY  this one by default ngx-bootstrap EN format 
// we have this issue only before model binding(loading time)  with angular locale (RU|DE) cant parse
// we need fix it manually use EN locale convert it

this.dateOfBirth=moment(value.birth_date).format('DD/MM/YYYY'); 
 
 }
}

HTML

  <input
                        #birthDate="ngModel" 
                        [(ngModel)]="birthDate"
                        [bsConfig]="datePickerConfig"
                        bsDatepicker
                        class="form-control"
                        id="birthDate"
                        name="birthDate"
                        placeholder="дд.мм.гггг"
                        required
                        type="text"
                      />

Model:

UI

I know this problem not last ,all version have. bs 3 and 4 ,now I have using with angular 8 and bs 4. Last 3yr same issue (DE locale same issue), now its fine works.

+1

@Et3rnal

I’ve switched to the angular material datepicker, this supports ISO strings: https://material.angular.io/components/datepicker/overview#setting-the-selected-date