如何將 ngbDatepicker 日期格式從 JSON 更改為 YYYY/MM/DD

Question

我正在使用 ngbDatepicker 這給了我 JSON 日期格式，如：

{ year: 2019, month: 6, day: 9 }

如何將其轉換為 YYYY/MM/DD？ 我正在使用 Angular 7。

我的代碼如下：

<div class="input-group">
   <input class="form-control" placeholder="YYYY-MM-DD"
          (click)="d2.toggle()" (ngModelChange)="onDateSelection($event,'ToDate');"  name="d2" #c2="ngModel" [(ngModel)]="toDate" ngbDatepicker #d2="ngbDatepicker">
         <div class="input-group-append">
          <button class="btn btn-outline-secondar" 
             (click)="d2.toggle()" type="button">
           <i class="fa fa-calendar" aria-hidden="true"></i>
          </button>
         </div>
 </div>

Answer 1

有兩個重要的類來管理 ngbDate。 一個用於格式化日期：DateParserFormater，另一個用於更改您從/向ngb-datepicker獲取/發送的值：DateAdapter。

因此，您可以創建 customDateAdapter 和 customDateParserFormatter。 但是，不要擔心名稱。 只有兩個可注入的類，例如

對於自定義日期適配器

@Injectable()
export class CustomDateAdapter {
  fromModel(value: string): NgbDateStruct
  {
     if (!value)
      return null
     let parts=value.split('/');
     return {year:+parts[0],month:+parts[1],day:+parts[2]}
  }

  toModel(date: NgbDateStruct): string // from internal model -> your mode
  {
    return date?date.year+"/"+('0'+date.month).slice(-2)
           +"/"+('0'+date.day).slice(-2):null
  }
}

是的一個具有兩個函數的可注入類，一個將 NgbDate 轉換為字符串，另一個將字符串轉換為 NgbDate。 請記住，這會更改您的“模型”

對於 CustomDateParserFormatter

@Injectable()
export class CustomDateParserFormatter {
  parse(value: string): NgbDateStruct
  {
    if (!value)
      return null
     let parts=value.split('/');
     return {year:+parts[0],month:+parts[1],day:+parts[2]} as NgbDateStruct

  }
  format(date: NgbDateStruct): string
  {
    return date?date.year+"/"+('0'+date.month).slice(-2)+"/"+('0'+date.day).slice(-2):null
  }
}

同樣是一個具有兩個函數的可注入類，一個將 NgbDate 轉換為字符串，另一個將字符串轉換為 NgbDate。 請記住，這會更改日期的“格式” - 如果您願意，很有用，例如 dd/MM/yyyy-

然后只需在您的組件中添加為提供者

  providers: [{provide: NgbDateAdapter, useClass: CustomDateAdapter},
              {provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter}]

在stackblitz看到組件的定義，你可以選擇，例如

@Component({
  selector: 'ngbd-datepicker-adapter',
  templateUrl: './datepicker-adapter.html',
  providers: [{provide: NgbDateAdapter, useClass: NgbDateNativeAdapter}]
})

或者

@Component({
  selector: 'ngbd-datepicker-adapter',
  templateUrl: './datepicker-adapter.html',
  providers: [{provide: NgbDateAdapter, useClass: CustomDateAdapter},
          {provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter}]
})

即使你可以寫

@Component({
  selector: 'ngbd-datepicker-adapter',
  templateUrl: './datepicker-adapter.html',
  providers: [{provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter}]
})

維護像 {year,month,day} 這樣的對象，但更改“掩碼” - 以及輸入日期的方式

注意：您也可以將提供程序添加到模塊中

Answer 2

你需要的是

var date = object.year + '/' + object.month + '/'+ object.day

Answer 3

如果您使用日期字段，則需要在 ts 中綁定模型。 在html中，像這樣調用dateselect方法

 (dateSelect)="onDateSelect($event)"

完整代碼：

 <input class="form-control"(dateSelect)="onDateSelect($event)"  id="TargetDate" placeholder="mm/dd/yyyy" name="targetDate" ngbDatepicker
          #date="ngbDatepicker"  />
          <div class="input-group-append">
            <button id="TargetDateButton" class="btn btn-outline-secondary" (click)="date.toggle()" type="button">
              <span class="oi oi-calendar"></span>
            </button>
          </div>

在類型腳本中，使用以下代碼。這僅在您使用 Ngbdate 選擇器時適用。

 onDateSelect(event) {
  let year = event.year;
  let month = event.month <= 9 ? '0' + event.month : event.month;;
  let day = event.day <= 9 ? '0' + event.day : event.day;;
  let finalDate = year + "-" + month + "-" + day;
 }