ngb date picker date format and display change

Question

I am uisng ngb date picker. this is my html

<div class="input-group">
   <input class="form-control ngbfield" placeholder="yyyy-mm-dd" required
      name="checkdate" [readonly]="true" #vl="ngModel"
      [(ngModel)]="profile.checkDate" ngbDatepicker #d1="ngbDatepicker"
      required>
   <div class="input-group-append">
      <button class="btn btn-outline-secondary fa fa-calendar" (click)="d1.toggle()" type="button"></button>
   </div>
</div>

Currently, the date picker is working well. I checked it using console log. This is my console log

this is my component file

export class MyProfileComponent implements OnInit {
   profile: any = {};
   @ViewChild(NgForm) profileform: NgForm;
   dtOptions: DataTables.Settings = {};
   constructor(private calendar: NgbCalendar) { }
    
   ngOnInit() {
      this.selectToday();
   }
   selectToday() {
     this.profile.checkDate = this.calendar.getToday();
   }
   addScheduleCheckin(a) {
     console.log(a);
     alert(a);
   }
}

But I need to get this date as below checkDate:"2021-05-22"

Have any option to do it in this library.

Alastyn · Accepted Answer · 2021-05-22T15:54:59.777

1

There is a very interesting answer on this post : How to change ngbDatepicker date format from JSON to YYYY/MM/DD

You need to create an adapter to transform the NgbDateStruct to the string format that you want and to convert string to NgbDateStruct, then you add it in your providers

Edit to answer your question in the comment :

To create a service and use it everywhere you want you first create a service like that :

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class ConverterDateService {
   
   constructor() { }

   convertNgbDateToString(dateToConvert) {
      return dateToConvert.year + '-' + ('0' + (dateToConvert.month)).slice(-2) + '-' + ('0' + dateToConvert.day).slice(-2);
   }

Then you inject it into your component's constructor like that :

constructor(private converterDateService: ConverterDateService) { }

And you call it into your function :

this.formattedCheckDate = this.converterDateService.convertNgbDateToString(this.profile.checkDate);

Hope this help you :)

edited May 22 '21 at 15:54

answered May 22 '21 at 15:26

Alastyn

43
3

this is working well for me this.formattedCheckDate = this.profile.checkDate.year + '-' + ('0' + (this.profile.checkDate.month)).slice(-2) + '-' + ('0' + this.profile.checkDate.day).slice(-2); – Kumara May 22 '21 at 15:30
I can use my solution, how i write it a common reusable function – Kumara May 22 '21 at 15:33
@Kumara By doing something like that : `convertDate(dateToConvert): string { return dateToConvert.year + '-' + ('0' + (dateToConvert.month)).slice(-2) + '-' + ('0' + dateToConvert.day).slice(-2);} ` then you call it `this.formattedCheckDate = this.convertDate(this.profile.checkDate);` – Alastyn May 22 '21 at 15:43
You can even put it in another class and make it static to call it every where you need – Alastyn May 22 '21 at 15:44
I need to use this another 2 forms. how I use this and write common service or somethin, then i can attach/inject it to my component – Kumara May 22 '21 at 15:47
@Kumara : I put the answer in the post, hope this help :) – Alastyn May 22 '21 at 15:58

ngb date picker date format and display change

1 Answers1