Reputation: 2601
I'm working on an app that's using this example:
https://stackblitz.com/angular/rynxmynlykl
What I want is to display the selected date in a different format. Instead of yyyy-mm-dd
, I want mm/dd/yyyy
. The placeholder is easy enough to change but I'm having trouble finding what I'm looking for in the docs (https://ng-bootstrap.github.io/#/components/datepicker/api).
The ngModel
accepts an object which contains year, month, and day. Datepicker then formats it to the above format.
The closest answer I found is here but is now out of date (How to change model structure of angular powered bootstrap ngbDatepicker).
Has anyone run across this scenario before?
Upvotes: 3
Views: 3883
Reputation: 73791
As mentioned in the DatePicker documentation, you can provide a custom version of the NgbDateParserFormatter. See this stackblitz for a demo.
The following code for the parser/formatter is adapted from this GitHubGist by Niels Robin-Aubertin:
import { Injectable } from "@angular/core";
import { NgbDateParserFormatter, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap";
@Injectable()
export class CustomDateParserFormatter extends NgbDateParserFormatter {
parse(value: string): NgbDateStruct {
if (value) {
const dateParts = value.trim().split('/');
if (dateParts.length === 1 && this.isNumber(dateParts[0])) {
return { year: this.toInteger(dateParts[0]), month: null, day: null };
} else if (dateParts.length === 2 && this.isNumber(dateParts[0]) && this.isNumber(dateParts[1])) {
return { year: this.toInteger(dateParts[1]), month: this.toInteger(dateParts[0]), day: null };
} else if (dateParts.length === 3 && this.isNumber(dateParts[0]) && this.isNumber(dateParts[1]) && this.isNumber(dateParts[2])) {
return { year: this.toInteger(dateParts[2]), month: this.toInteger(dateParts[0]), day: this.toInteger(dateParts[1]) };
}
}
return null;
}
format(date: NgbDateStruct): string {
let stringDate: string = "";
if (date) {
stringDate += this.isNumber(date.month) ? this.padNumber(date.month) + "/" : "";
stringDate += this.isNumber(date.day) ? this.padNumber(date.day) + "/" : "";
stringDate += date.year;
}
return stringDate;
}
private padNumber(value: number) {
if (this.isNumber(value)) {
return `0${value}`.slice(-2);
} else {
return "";
}
}
private isNumber(value: any): boolean {
return !isNaN(this.toInteger(value));
}
private toInteger(value: any): number {
return parseInt(`${value}`, 10);
}
}
The date parser/formatter is added to the providers in the module:
import { NgbDateParserFormatter, ... } from '@ng-bootstrap/ng-bootstrap';
import { CustomDateParserFormatter } from "./datepicker-formatter";
@NgModule({
...
providers: [{ provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter }]
})
export class AppModule { }
Upvotes: 4