angular - 无法将“13/7/2021”转换为 Angular 11 中管道 DatePipe 的日期

Question

在我的角度形式中，我使用了 Angular Bootstrap Datepicker控件来选择日期。从 datepicker 中选择日期后，我从控件中获得的日期格式是"dd-MM-yyyy"。现在我想将日期格式化为“yyyy-MMM-dd”格式。所以我使用了 DatePipe Pipe。但如果日期选择 1-12 日期，管道可以转换日期。但是，如果我选择任何一个月的 13 个日期，它就无法将日期转换为我想要的指定格式。

另一个问题是即使我选择了任何月份的 1-12 日期，在格式化后管道与日期和月份不匹配。例如，如果我选择“2021 年 7 月 2 日”。然后它将日期转换为“2021-Feb-07”，这是不正确的。

现在我想要两件事是正确的。

首先，如果我选择任何月份的 1-12 日期，那么管道应该正确转换日期。这意味着如果我选择“2021 年 7 月 2 日”，那么在转换后我应该得到“2021-Jul-02”而不是“2021-Feb-07”

其次，如果我选择任何一个月的 12 个以上的日期，那么它不应该抛出异常：“无法将“13/7/2021”转换为管道 DatePipe 的日期”

Bellow 是我用于转换日期的 datepicker 和 datetime 管道的 HTML 代码。我还为我的日期选择器使用了两项服务。

<div class="input-group">
    <input class="form-control" placeholder="dd-mm-yyyy" id="startDate" name="startDate"
        formControlName="startDate" [(ngModel)]="selectedStartDate" ngbDatepicker
        #d="ngbDatepicker" [ngClass]="{ 'is-invalid': submitted && f.startDate.errors }">
    <div class="input-group-append">
        <button class="btn btn-outline-secondary calendar" (click)="d.toggle()"
            type="button"></button>
    </div>
    <span *ngIf="submitted && f.startDate.errors" class="invalid-feedback">
        <span *ngIf="f.startDate.errors.required">Start date is required</span>
    </span>
</div>

日期管道：

let latest_date =this.datePipe.transform(this.selectedStartDate, 'yyyy-MMM-dd');

日期选择器服务

import { Injectable } from '@angular/core';
import { NgbDateAdapter, NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';

/**
 * This Service handles how the date is represented in scripts i.e. ngModel.
 */
@Injectable()
export class CustomAdapter extends NgbDateAdapter<string> {

    readonly DELIMITER = '/';

    fromModel(value: string | null): NgbDateStruct | null {
        if (value) {
            let date = value.split(this.DELIMITER);
            return {
                day: parseInt(date[0], 10),
                month: parseInt(date[1], 10),
                year: parseInt(date[2], 10)
            };
        }
        return null;
    }

    toModel(date: NgbDateStruct | null): string | null {
        return date ? date.day + this.DELIMITER + date.month + this.DELIMITER + date.year : null;
    }
}


/**
 * This Service handles how the date is rendered and parsed from keyboard i.e. in the bound input field.
 */
@Injectable()
export class CustomDateParserFormatter extends NgbDateParserFormatter {

    readonly DELIMITER = '-';

    parse(value: string): NgbDateStruct | null {
        if (value) {
            let date = value.split(this.DELIMITER);
            return {
                day: parseInt(date[0], 10),
                month: parseInt(date[1], 10),
                year: parseInt(date[2], 10)
            };
        }
        return null;
    }

    format(date: NgbDateStruct | null): string {
        let dDay = "";
        let mMonth = "";

        if (date !== null) {
            if (date.day <= 9) {
                dDay = "0" + date.day;
            }
            else {
                dDay = (date.day).toString();
            }

            if (date.month <= 9) {
                mMonth = "0" + date.month;
            }
            else {
                mMonth = (date.month).toString();
            }
        }

        //return date ? date.day + this.DELIMITER + date.month + this.DELIMITER + date.year : '';
        return date ? dDay + this.DELIMITER + mMonth + this.DELIMITER + date.year : '';
    }
}

标签： angularangular-bootstrapangular-bootstrap-calendar