如何更改angular bootstrap中ngbDatepicker输入字段中的日期格式

Question

HTML:-

<li><span class="float-left label">Date of birth</span>
<div class="float-right fill-text position-relative edit-calender">
<input type="text" (click)="d.toggle()" class="edit-field"
[outsideDays]="'collapsed'" id="datePicker" ngbDatepicker formControlName="dob" #d="ngbDatepicker" [minDate]="minDate"
[maxDate]="maxDate" readonly>
<span class="calendar" id="calIcon" (click)="waitAndToggle();"><i id="calIcon" class="far fa-calendar-alt"></i></span>
<div class="text-danger" *ngIf="form.get('dob').hasError('required')
&& ( form.get('dob').touched || formSubmitAttempt)">
{{ 'Validations.dob' | translate }}
</div>
</div>
</li>

现在，当我选择某个日期时，它设置为YYYY-MM-DD格式，但我需要更改为其他格式(MM-DD-YYYY或DD-MM-YYY(。检查其node_modules文件夹，但没有找到任何相同的解决方案。

我核对了要点https://gist.github.com/nrobinaubertin/61ff1c3db355c74f4e56f485b566ab22但这并没有将输入字段中的值设置为DD-MM-YYYY。

Answer 1

要使用扩展NbgDateParserFormat的类，必须将其包含在提供程序的app.module中，

@NgModule({
declarations: [
AppComponent,
...  
],
imports: [
BrowserModule,
NgbModule,
...
],
providers: [
{ provide: NgbDateParserFormatter, useClass: DateParserFormatter },
...
],
bootstrap: [AppComponent]
})

Answer 2

完美的解决方案是更改

ngb-date-parser-formatter.js

从下面的代码中，您将在输入字段中获得DD-MM-YYYY日期格式。

var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
import { padNumber, toInteger, isNumber } from '../util/util';
/**
* Abstract type serving as a DI token for the service parsing and formatting dates for the NgbInputDatepicker
* directive. A default implementation using the ISO 8601 format is provided, but you can provide another implementation
* to use an alternative format.
*/
var NgbDateParserFormatter = (function () {
function NgbDateParserFormatter() {
}
return NgbDateParserFormatter;
}());
export { NgbDateParserFormatter };
var NgbDateISOParserFormatter = (function (_super) {
__extends(NgbDateISOParserFormatter, _super);
function NgbDateISOParserFormatter() {
return _super !== null && _super.apply(this, arguments) || this;
}
NgbDateISOParserFormatter.prototype.parse = function (value) {
if (value) {
var dateParts = value.trim().split('-');
if (dateParts.length === 1 && isNumber(dateParts[0])) {
return { year: toInteger(dateParts[0]), month: null, day: null };
}
else if (dateParts.length === 2 && isNumber(dateParts[0]) && isNumber(dateParts[1])) {
return { year: toInteger(dateParts[0]), month: toInteger(dateParts[1]), day: null };
}
else if (dateParts.length === 3 && isNumber(dateParts[0]) && isNumber(dateParts[1]) && isNumber(dateParts[2])) {
return { year: toInteger(dateParts[0]), month: toInteger(dateParts[1]), day: toInteger(dateParts[2]) };
}
}
return null;
};
NgbDateISOParserFormatter.prototype.format = function (date) {
return date ?
(isNumber(date.day) ? padNumber(date.day) : '')+"-"+ (isNumber(date.month) ? padNumber(date.month) : '') +"-"+ date.year:'';
};
return NgbDateISOParserFormatter;
}(NgbDateParserFormatter));
export { NgbDateISOParserFormatter };
//# sourceMappingURL=ngb-date-parser-formatter.js.map