ngb-datepicker(ng Bootstrap)，显示日期为DD/MMM/YY的日期(示例输出"Sunday，23/12/18") [英] ngb-datepicker(ng Bootstrap) Display Day with Date as DD/MMM/YY (Example output "Sunday, 23/12/18" )

问题描述

演示代码: https://stackblitz.com/edit/angular-bife8z? file = app％2Fdatepicker-basic.html

我想显示我选择的日期，例如星期天，18/12/23" ，格式为日期，DD/MMM/YY"

i want to Display my selected date like "Sunday, 23/12/18" Format is "Day, DD/MMM/YY"

推荐答案

您需要在JavaScript日期中转换模型(是NgbDateStruct).

you need convert your model (is a NgbDateStruct) in a Date of JavaScript.

<ngb-datepicker #dp [(ngModel)]="model" 
     (ngModelChange)="dateJs=toDateJs($event);
                      dateString=toDateString($event)">
</ngb-datepicker>

<hr/>

<div class="my-3">
  Selected Date is: 
  <b>{{ model.day }}/{{ model.month }}/{{ model.year }}</b><br/>
  <b>{{dateJs |date:'EEE,dd/MM/yyyy'}}</b><br/>
  <b>{{dateString}}</b>
</div>

//don't forget import DatePipe
import {DatePipe} from '@angular/common'

@Component({
})
export class NgbdDatepickerBasic {
  /three variables
  model: NgbDateStruct;  //the model as NgbDateStruct
  dateJs:any;  //dateJs will be a Date object of javascript
  dateString:string;  //a string

  ngOnInit(){
    this.selectToday();
  }
  constructor(private calendar: NgbCalendar) {
  }
  //This function convert NgbDateStruct to Date object
  toDateJs(date: NgbDateStruct): Date {
    return date ? 
      new Date(Date.UTC(date.year,date.month-1,date.day,0,0,0)) : null;
  }
  //This function convert NgbDateStruct to string
  toDateString(date:NgbDateStruct)
  { 
    //The DatePipe need as argument the "locale"
    return date?  new DatePipe('en-US').transform(
      new Date(Date.UTC(date.year, date.month - 1, date.day, 0, 0, 0)),
      'EEE,dd/MM/yyyy')
    :null;
  }
  selectToday() {
    this.model = this.calendar.getToday();
    this.dateJs=this.toDateJs(this.model);
    this.dateString=this.toDateString(this.model);
  }
}

注意:我使用的是日期的管道日期，请参见以下选项:选项

NOTE:I used the pipe date of angular, see the options: the options

这篇关于ngb-datepicker(ng Bootstrap)，显示日期为DD/MMM/YY的日期(示例输出"Sunday，23/12/18")的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！