格式化通过Bootstrap ngbDatepicker以角度2选择的日期

时间:2016-12-27 11:10:58

标签: angular bootstrap-datepicker

HTML代码

 <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>
ts文件中的

代码

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

我需要以dd / mm / yyyy格式显示来自后端或从日期选择器中选择的日期。

1 个答案:

答案 0 :(得分:2)

您可以使用此示例中的日期管道:

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

如果所选日期不是日期对象,则实现自定义管道。在这里找到自定义管道的示例(使用momentjs)应用调用中传递的格式或默认格式&#39; HH:mm&#39;

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