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.
Latest posts by Sigit Prasetya Nugroho (see all)
- How To Insert Ads In The Middle Post Blogspot Blogger - January 26, 2019
- Login Page – Tutorial CRUD Client and API Server Using JQuery And Lumen Part 2 - January 23, 2019
- Tutorial CRUD Client and API Server Using JQuery And Lumen Part 1 - January 4, 2019
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.