Skip to content

Instantly share code, notes, and snippets.

@nrobinaubertin
Created January 17, 2017 13:36
Show Gist options
  • Save nrobinaubertin/61ff1c3db355c74f4e56f485b566ab22 to your computer and use it in GitHub Desktop.
Save nrobinaubertin/61ff1c3db355c74f4e56f485b566ab22 to your computer and use it in GitHub Desktop.
Exemple of ngb-date-parser-formatter implementation (ng-bootstrap)
import { NgbDatepickerConfig, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
import { NgbDateFRParserFormatter } from "./ngb-date-fr-parser-formatter"
@Component({
providers: [{provide: NgbDateParserFormatter, useClass: NgbDateFRParserFormatter}]
})
export class AppComponent {}
import { Injectable } from "@angular/core";
import { NgbDateParserFormatter, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap";
function padNumber(value: number) {
if (isNumber(value)) {
return `0${value}`.slice(-2);
} else {
return "";
}
}
function isNumber(value: any): boolean {
return !isNaN(toInteger(value));
}
function toInteger(value: any): number {
return parseInt(`${value}`, 10);
}
@Injectable()
export class NgbDateFRParserFormatter extends NgbDateParserFormatter {
parse(value: string): NgbDateStruct {
if (value) {
const 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[1]), month: toInteger(dateParts[0]), day: null};
} else if (dateParts.length === 3 && isNumber(dateParts[0]) && isNumber(dateParts[1]) && isNumber(dateParts[2])) {
return {year: toInteger(dateParts[2]), month: toInteger(dateParts[1]), day: toInteger(dateParts[0])};
}
}
return null;
}
format(date: NgbDateStruct): string {
let stringDate: string = "";
if(date) {
stringDate += isNumber(date.day) ? padNumber(date.day) + "/" : "";
stringDate += isNumber(date.month) ? padNumber(date.month) + "/" : "";
stringDate += date.year;
}
return stringDate;
}
}
@hieugie
Copy link

hieugie commented Dec 6, 2018

MANY THANKS, BROS

@wuilliam321
Copy link

Excellent it still working

@jocafi
Copy link

jocafi commented Jan 21, 2019

Great. Thanks, man !!!

@Hir0ta
Copy link

Hir0ta commented Jan 31, 2019

Awesome! Thank you!

@Nirmalkumar941
Copy link

thanks a lot

@nowsathns
Copy link

Awesome! Thanks a lot.

Modified the code for my own implementation for the Custom DateFormat with MomentJS.

https://gist.github.com/nowsathns/d8dd998b16109e5d5dce6b6086a65c6d

@zambonni
Copy link

Thanks!

@amatosg
Copy link

amatosg commented May 21, 2019

ho do you implement this in the html file?

@lbs-rodrigo
Copy link

Perfect!

@qpnguyen83
Copy link

Perfect!
Thanks for sharing.

@DavidZam
Copy link

Works like a charm! Thanks!!

@faris-dude
Copy link

Thanks dude..

@chrisjaimes
Copy link

Beautiful :) thanks!

@pugazh-ext-ey
Copy link

Great Its works.. Thanks

@monir-tuhin
Copy link

waoo!!! its great. thanks a lot.....

@Ranjith9353
Copy link

Thanks a lot

@lodestar-sr
Copy link

Thank you so much!!!

@UsmanMajied17
Copy link

Thank you so much. It worked like a charm

Copy link

ghost commented Dec 23, 2020

Thank you so much..

@carlosantilon94
Copy link

I'm getting this error: Uncaught TypeError: Class constructor NgbDateParserFormatter cannot be invoked without 'new'. Anyone here with the same problem ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment