Format the date which is selected through Bootstrap ngbDatepicker in angular 2

Question

HTML code

 <form novalidate [formGroup]="udpateObj">
    <div class="form-group">
      <label for="HDresolutionDate">Resolution Date:</label>
      <input type="text" id="date"  formControlName="DateP" ngbDatepicker
                                    #d1="ngbDatepicker">   

    </div>
  <form>

code in ts file

let dateVal  = backendDate;// am getting date obj from backend and 
  this.udpateObj= new FormGroup({ 
  DateP: new FormControl(dateVal)
});

I need to show the date which is coming from backend or selected from date picker in dd/mm/yyyy format.

Answer 1

You can use the date pipe like in this example:

<input type="text" value = "{{dateObject | myDateFormat: 'dd/mm/yyyy' }}/> 

or implement a custom pipe if selected date is not a Date Object. Find here example for custom pipe (using momentjs) applying the format passed in call or the default format 'HH:mm'

import { Pipe, PipeTransform} from '@angular/core';
declare var moment: any;

@Pipe({
  name: 'myDateFormat'
})
export class myDateFormat implements PipeTransform {
   transform(value: any, args: string[]): any {
     if (value) {
         var date = value instanceof Date ? value : moment(value);
         if (args && args.length > 0)
             return moment(date).format(args);
         else 
            return moment(date).format('HH:mm');
    }
  }
}