NgbDatePicker - 如何将 longDate 字符串绑定到 [ngModel]？

Question

我正在尝试将格式化为 "longDate" 字符串的日期绑定到 ngbDatePicker 中的 [ngModel] 输入值。例如，当用户选择日期时，我想显示 "January 15, 2017" 而不是“2017-01-15”。

我知道 [ngModel] 只绑定到一个 NgbDateStruct 类型的对象，在我看来，当我传递一个 NgbDateStruct 类型的对象时（我们称它为 selectedStartDate，如下面的代码所示）到 [ngModel] 然后 NgbDateParserFormatter.format(selectedStartDate) 在幕后被调用以将日期显示为 "yyyy-MM-dd"。那么如何将 longDate 格式（即 2017 年 1 月 15 日）绑定到 [ngModel]？我考虑过覆盖 NgbDateParserFormatter 中的 format() 方法以显示我想要的日期，但我不确定 how/if 当我传递 NgbDateStruct 对象绑定到 [ngModel] 时它会被调用。

此外，最好保留 NgbDateStruct parse/format 方法，因为我将日期数据作为 "yyyy-MM-dd" 字符串传递给 API，这些会派上用场。 . 我正在使用 ngbootstrap alpha.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>

更新：虽然下面的解决方案有效，但出于某种原因我无法设置默认日期值。例如，从我的日期选择器所在的组件，我在 ngOnInit() 中实现 OnInit 和表单我将我的 "selectedStartDate" 绑定字段设置为 NgbDateStruct 类型的日期。然后在调试模式下，我能够看到我的 selectedStartDate 字段被填充，最终调用 MyNgbDateParserFormatter.format() 将日期格式化为 "longDate" 字符串 - 但是日期format() 方法中的参数为 null，当然会抛出一个错误……我不明白为什么它会以 null 的形式到达那里。之后，当我 select 一个日期时，"selectedDate" 会按预期以 "longDate" 格式显示。

我注意到的下一个问题是，现在每次我 select 约会时，selectStartDate() 方法都不会被触发。

这是我的模块（我在 'shared module' 中提供它，因为这是声明我使用 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 方面走在正确的轨道上。您想要创建自己的 ParserFormatter 实现，并将所选日期格式作为 .format() 函数的输出格式。类似地，您重写 .parse() 函数以获取您选择的日期格式并将其转换为 NgbDateStruct。如果你想为服务器使用另一种格式，那么我建议你也为它创建一个函数。我在这里创建了一个 plunker 示例：

plnkr

如图所示，第一步是扩展 NgbDateParserFormatter 并覆盖提到的两个函数：

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

然后在你的 AppModule 中你需要提供这个新的实现：

@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() 函数。您还可以在需要时调用 formatForServer() 函数：

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

NgbDatePicker - 如何将 longDate 字符串绑定到 [ngModel]？

NgbDatePicker - How to bind longDate string to [ngModel]?

datepicker

ng-bootstrap

angular