use startDate as YYYY-MM-DD instead of year,month,day

Question

Is possible to use in ngb-datepicker startDate as YYYY-MM-DD ?

Now I got

<input class="form-control ml-2" placeholder="{{awayFrom}}" [startDate]="{year: 2018, month: 11, day: 11}"  name="awayFrom" [(ngModel)]="awayFrom" ngbDatepicker (click)="d.toggle()" #d="ngbDatepicker">

But I want to:

<input class="form-control ml-2" placeholder="{{awayFrom}}" [startDate]="startDate"  name="awayFrom" [(ngModel)]="awayFrom" ngbDatepicker (click)="d.toggle()" #d="ngbDatepicker">

where startDate is Date getting from Api. And this date is in format YYYY-MM-DD

I'm afraid than not. It's true that you can create your custom form adapter to mannage the dates as string, see https://stackblitz.com/edit/angular-64knsp?file=app%2Fdatepicker-adapter.html, but not work with [startDate] — Eliseo, Jun 17 '20 at 12:27

emihud · Answer 1 · 2020-06-19T09:42:38.527

0

DatePicker accepts date only in object format. So what you need to do is convert your string date to an object. You can do it by creating a Pipe and DatePicker Date Type

@Pipe({name: 'datePickerDatePipe'})
export class DatePickerDatePipe implements PipeTransform {
  transform(api_date_string: string): DatePickerDate {
    let date =  new Date(api_date_string);
    let calendarDate = {year: date.getFullYear(), month: date.getMonth(), day: date.getDay()};
    return calendarDate;
  }
}

export type DatePickerDate = {year: number, month: number, day: number};

// usage in HTML:
{{model.startdate | datePickerDatePipe}}

edited Jun 19 '20 at 09:42

answered Jun 17 '20 at 11:28

emihud

138
8

I think that I must create pipe to make format year, month, day – Marcin Domorozki Jun 17 '20 at 11:33
Yes, create new one or just use .pipe function of Observable in your service/component Please tell me if you made it and accept my answer if it helped ;-) – emihud Jun 17 '20 at 12:52
This is my output now: startd {"year":"2020","month":"10","day":"11"} But when I am trying use it like [startDate]="startd" it doesn't works – Marcin Domorozki Jun 17 '20 at 13:03
Hi Marcin, check my solution in Answer. I made some changes. – emihud Jun 19 '20 at 09:44

use startDate as YYYY-MM-DD instead of year,month,day

1 Answers1