NgbDatePicker - longDate文字列を[ngModel]にバインドする方法は？

Question

"longDate"文字列としてフォーマットされた日付をngbDatePickerの[ngModel]入力値にバインドしようとしています。たとえば、ユーザーが日付を選択すると、 "2017-01-15"の代わりに "January 15、2017"と表示したいと考えています。

私は[ngModel]のみのタイプNgbDateStructのオブジェクトに結合し、その後、[ngModel]に（次のコードのようにのはselectedStartDateそれを呼びましょう）私はタイプNgbDateStructのオブジェクトを渡す時にように私には思われることを理解しNgbDateParserFormatter .format（selectedStartDate）は、「yyyy-MM-dd」と日付を表示するためにシーンの背後で呼び出されます。どうすればlongDate形式（2017年1月15日など）を[ngModel]にバインドできますか？ NgbDateParserFormatterのformat（）メソッドをオーバーライドして日付を表示することを考えましたが、[ngModel]にバインドするNgbDateStructオブジェクトを渡すとどのように呼び出されるのかわかりません。

さらに、日付データを "yyyy-MM-dd"文字列としてAPIに渡しているので、NgbDateStructの解析/書式設定メソッドをそのまま使用するといいでしょう。これらは便利です。ngbootstrapアルファ18。どんな助けもありがとう！

<div class="form-group">From: 
    <div class="input-group"> 
     <input class="form-control" 
       name="dp1" 
       [ngModel]="selectedStartDate" 
       (ngModelChange)="selectStartDate($event)" 
       ngbDatepicker 
       [dayTemplate]="customDay" 
       [markDisabled]="isDisabled" 
       #d1="ngbDatepicker" /> 
     <div class="input-group-addon" (click)="d1.toggle()"> 
      <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;" /> 
     </div> 
    </div> 
</div> 

UPDATE： 作品以下の解決策は、何らかの理由で私はデフォルトの日付値を設定することができませんしながら。たとえば、私の日付ピッカーが存在するコンポーネントから、私はOnInitとフォームをngOnInit（）内で実装しています。私は "selectedStartDate"バインディングフィールドをNgbDateStruct型の日付に設定しています。それから、デバッグモードでは、私のselectedStartDateフィールドにデータが取り込まれるのを見ることができ、最終的にMyNgbDateParserFormatter.format（）が呼び出され、日付が "longDate"文字列にフォーマットされますが、format（）メソッドのdateパラメータはnullエラーはもちろんスローされます...なぜそれがnullになっているのかわかりません。その後、私は日付を選択すると、 "selectedDate"は "longDate"形式で期待通りに表示されます。

私が気づいた次の問題は、日付を選択するたびに、メソッドselectStartDate（）が起動しないことです。

ここにここに私のモジュール（ngbdatepickerを使用して、私のコンポーネントが宣言されているところがありますので、私は「共有モジュールの中でこれを提供しています）

@NgModule({ 
    imports: [ 
     CommonModule, 
     FormsModule, 
     NgbModule, 
     ChartsModule 
    ], 
    exports: [ 
     CommonModule, 
     FormsModule, 
     NgbModule, 
     CrgbFilterComponent, 
     DateFilterComponent, 
     BarChartComponent, 
     LineChartComponent, 
     ChartsModule 
    ], 
    declarations: [ 
     CrgbFilterComponent, 
     DateFilterComponent, 
     BarChartComponent, 
     LineChartComponent 
    ], 
    providers: [ 
     { 
      provide: NgbDateParserFormatter, 
      useFactory:() => { return new CustomNgbDateParserFormatter("longDate") } 
     }, 
     DateFilterService, 
     BarChartService, 
     TableService, 
     HelperMethodsService 
    ] 
}) 
export class SharedModule { } 

は私のコンポーネント（かまい部品）です。

ここで

export class DateFilterComponent implements OnInit { 

selectedStartDate: NgbDateStruct; 
selectedEndDate: NgbDateStruct; 
@Output() startDateChanged: EventEmitter<string>; 
@Output() endDateChanged: EventEmitter<string>; 

    constructor(private dateFilterService: DateFilterService) { 
     this.startDateChanged = new EventEmitter<string>(); 
     this.endDateChanged = new EventEmitter<string>(); 
    } 

ngOnInit(): void { 
     this.selectStartDate(this.dateFilterService.setDefaultStartDate()); 
     this.selectEndDate(this.dateFilterService.setDefaultEndDate()); 
    } 

selectStartDate(date: NgbDateStruct) { 
     if (date != null) { 
      this.selectedStartDate = date; 
      let dateString = this.dateFilterService.toServerString(date);; 
      this.startDateChanged.emit(dateString); 
     } 
    } 

selectEndDate(date: NgbDateStruct) { 
     if (date != null) { 
      this.selectedEndDate = date; 
      let dateString = this.dateFilterService.toServerString(date); 
      this.endDateChanged.emit(dateString); 
     } 
    } 

は私の日付フィルタサービスです：

export class DateFilterService { 

    constructor(private parserFormatter: NgbDateParserFormatter) { } 

    setDefaultStartDate(): NgbDateStruct { 
     // removing for simplicity, returning a NgbDateStruct object correctly. 
    } 

    setDefaultEndDate(): NgbDateStruct { 
     // removing for simplicity, returning a NgbDateStruct object correctly. 
    } 

    toNgbDateStruct(date: string): NgbDateStruct { 
     return this.parserFormatter.parse(date); 
    } 

    tolongDateString(date: NgbDateStruct): string { 
     return this.parserFormatter.format(date); 
    } 

    toServerString(date: NgbDateStruct): string { 
     return this.parserFormatter.formatForServer(date); 
    } 
} 

はどのいただき、ありがとうございます事前に助けてください、ありがとう。

Answer 1

NgbDateParserFormatterをオーバーライドして正しい軌道に乗っていると思います。 .format（）関数の出力として、選択した日付形式で独自のParserFormatter実装を作成したいとします。同様に、.parse（）関数をオーバーライドして日付形式を選択し、NgbDateStructに変換します。サーバーの別の形式を使用する場合は、そのための関数も作成することをお勧めします。最初のステップは、NgbDateParserFormatterを拡張し、2つの関数は言及上書きすることで示されているように

plnkr

：あなたのAppModuleで

import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap'; 
import { DatePipe } from '@angular/common'; 

export class MyNgbDateParserFormatter extends NgbDateParserFormatter { 
    datePipe = new DatePipe('en-US'); 
    constructor(
     private dateFormatString: string) { 
     super(); 
    } 
    format(date: NgbDateStruct): string { 
     if (date === null) { 
      return ''; 
     } 
     try { 
      return this.datePipe.transform(new Date(date.year, date.month - 1, date.day), this.dateFormatString); 
     } catch (e) { 
      return ''; 
     } 
    } 
    formatForServer(date: NgbDateStruct): string { 
     if (date === null) { 
      return ''; 
     } 
     try { 
      return this.datePipe.transform(new Date(date.year, date.month - 1, date.day), 'y-MM-dd'); 
     } catch (e) { 
      return ''; 
     } 
    } 
    parse(value: string): NgbDateStruct { 
     let returnVal: NgbDateStruct; 
     if (!value) { 
      returnVal = null; 
     } else { 
      try { 
       let dateParts = this.datePipe.transform(value, 'M-d-y').split('-'); 
       returnVal = { year: parseInt(dateParts[2]), month: parseInt(dateParts[0]), day: parseInt(dateParts[1]) }; 
      } catch (e) { 
       returnVal = null; 
      } 
     } 
     return returnVal; 
    } 
} 

、あなたはこれを提供する必要がある私は、ここでの例のplunkerを作成してい新しい実装：

@NgModule({ 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    ReactiveFormsModule, 
    JsonpModule, 
    NgbModule.forRoot() 
    ], 
    declarations: [ 
    App, 
    NgbdDatepickerPopup 
    ] 
    bootstrap: [ App ], 
    providers: [ 
    {provide: NgbDateParserFormatter, useFactory:() => new MyNgbDateParserFormatter('longDate')} 
    ] 
}) 
export class AppModule {} 

あなたのngbDatepickersはこのバージョンのparse（）とformat（）functioを使用しますns。

import {Component} from '@angular/core'; 
import { NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap'; 
@Component({ 
    selector: 'ngbd-datepicker-popup', 
    templateUrl: 'src/datepicker-popup.html' 
}) 
export class NgbdDatepickerPopup { 
    model; 
    constructor(
    private ngbDateParserFormatter: NgbDateParserFormatter 
) {} 
    getServerDate(dateStruct) { 
    return this.ngbDateParserFormatter.formatForServer(dateStruct); 
    } 
}