Here’s an easy way to change the date format on the ng-bootstrap datepicker angular 5. I got this way via ng-bootstrap official github and I have tested its success. If you use the ng-bootstrap module to run the css bootstrap framework component without jQuery, there are few constraints such as changing the date format according to the format you need. Ng-bootstrap implements ISO 8601 for date format. Follow this short tutorial
Read more: Tutorial Simple CRUD Angular 5 And Lumen 5.6 For Beginners
On the ng-bootstrap official site, datepicker has yyyy-mm-dd format, to change to “dd/mm/yyyy” you need to create a new class to extend the NgbDateParserFormatter class .
Create a new ts file named dateformat.ts and copy the following code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap'; import { Injectable } from '@angular/core'; import { isNumber, toInteger, padNumber } from '@ng-bootstrap/ng-bootstrap/util/util'; @Injectable() export class NgbDateCustomParserFormatter extends NgbDateParserFormatter { parse(value: string): NgbDateStruct { if (value) { const dateParts = value.trim().split('/'); if (dateParts.length === 1 && isNumber(dateParts[0])) { return {day: toInteger(dateParts[0]), month: null, year: null}; } else if (dateParts.length === 2 && isNumber(dateParts[0]) && isNumber(dateParts[1])) { return {day: toInteger(dateParts[0]), month: toInteger(dateParts[1]), year: null}; } else if (dateParts.length === 3 && isNumber(dateParts[0]) && isNumber(dateParts[1]) && isNumber(dateParts[2])) { return {day: toInteger(dateParts[0]), month: toInteger(dateParts[1]), year: toInteger(dateParts[2])}; } } return null; } format(date: NgbDateStruct): string { return date ? `${isNumber(date.day) ? padNumber(date.day) : ''}/${isNumber(date.month) ? padNumber(date.month) : ''}/${date.year}` : ''; } } |
then import the class on the angular component that is using the datepicker.
1 | import { NgbDateCustomParserFormatter} from '../../../../filter/dateformat'; |
Then add the provider to the component that will use the class
1 2 3 4 5 6 7 8 9 10 | @Component({ selector: '....', templateUrl: '....', styleUrls: ['....'], animations: [....], host: { '....' }, providers: [ {provide: NgbDateParserFormatter, useClass: NgbDateCustomParserFormatter} ] }) |
Please run your application and test the result. If successful then the application goes like the following picture
Source code: https://github.com/ng-bootstrap/ng-bootstrap/issues/2072
Read another article:Angular 4 Tutorial For Beginner With Simple App Project
So a quick tutorial on how to change the date format on ng-bootstrap datepicker angular 5.
Hi,
The article is quite useful and easy to understand.
Using angular 7. When the dateformat.ts is used, it is showing compilation error as ‘Module not found: Error: Can’t resolve ‘@ng-bootstrap/ng-bootstrap/util/util’ in the above file. Please advise.
dear akhil,
sory im using angular 5 🙂
i will update to angular 7 immediatly
New Angular rules have removed the ability to use the util/util in @ngBootstrap. Just copy the functions you need into the component you’re needed them in instead of importing util.