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
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.
Do you have any working sample ?
What is your angular version? I have never tried it again after version 5
I have angular 7, ng-bootstrap/ng-bootstrap: “4.2.1”
I am not able to load the css as well, I have added the stylesheet in index.html. If you have any example pls share. thanks
Hi, I don´t understand what you need by your last comment. I have the same error util/util so you recommend to delete all imports and also things in providers and just past all code to component? Or if you could put here small example.
Anyone has working example for this?
I have angular 7, ng-bootstrap/ng-bootstrap: “4.2.1”
I am not able to load the css as well, I have added the stylesheet in index.html. If you have any example pls share. thanks
Use this util class in the below mentioned path instead of ‘@ng-bootstrap/ng-bootstrap/util/util’ and its working fine in Ang7.
https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/util/util.ts
thanks