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.

there must be option for the format of date in the datepicker you have used. if there is nothing then you have to change manually forma of date using javascript — Pardeep Jain
– Pardeep Jain, Commented Dec 27, 2016 at 11:18
is there a reason you wouldn't use NgbDateParserFormatter? Per their docs. ng-bootstrap.github.io/#/components/datepicker — silentsod
– silentsod, Commented Dec 27, 2016 at 21:31

Karl · Accepted Answer · 2016-12-27 11:23:42Z

2

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');
    }
  }
}

answered Dec 27, 2016 at 11:23

Karl

3,1093 gold badges24 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related