ngx-bootstrap

ngx-bootstrap copied to clipboard

Bug description or feature request:

Can you please re-open this issue: #4020

The datepicker shows 'Invalid date' on data from the server. Why can't it parse an ISO date?

I shouldn't need to write code like this just for the datepickler:

            this.httpClient.get<ProjectDescription>('/api/Get/SomeData/').toPromise()
                .then(result => {
                    this.item= result;
                    this.item.startDate = new Date(this.item.startDate);

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap:

3.0.1

Angular:

6.0.7

Bootstrap:

3.3.7

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..

same problem

+1 please fix it

+1 same problem

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">

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

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

+1 please fix this issue.

+1 please fix it

Any updates? i am also facing the same issue.

What is the best work around this issue? I'm using new Date(); with string phrasing

@Et3rnal

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

@coffeymatt Thanks. Unfortunately, this is not an option for me :\

+1 please fix it. Having the same issue too.

Still nothing?

any updates on this?

+1

+1

+1

+1. Please fix it

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.

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.

+1 not fixed yet?

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 the same module where you include the date picker, include this provider.

@NgModule({
  providers: [
    SharedService,
       { provide: BsDatepickerConfig, useFactory: NaoDatepickerConfig }
   ]
})
export class SharedModule { }

With the adapter: nao-date-picker.adapter.ts

import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';

export function NaoDatepickerConfig(): BsDatepickerConfig {
  return Object.assign(new BsDatepickerConfig(), {
    dateInputFormat: 'YYYY-MM-DD'
  });
}

This will automatically normalize your dates to the set format

A hack that worked for me

component.html

<input type="text" class="form-control" [bsConfig]="bsConfig" (bsValueChange)="updateDate($event, control.key)"
               [title]="control.placeholder" bsDatepicker/>

component.ts

 async updateDate(event: any, key: string) {
    const date = new Date(event).toISOString();
    this.dynamicFormGroup.get(key)?.setValue(date);
  }