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
Sorry, this will be a breaking change in 3.0.0 – we are migrating to Angular package format and as such you will not be able to use “deep” imports.
I know that this is not what you want to hear but we see this as a “good thing” since util is supposed to be our private implementation detail and not meant to be pubic API…
This is a very simple utility so feel free to copy it over to your project if you need it:
https:// github.com/ng-bootstrap/ng-bootstrap/blob/master/src/util/util.ts
@Dipti, have you got the working example?
The solution is to import the functions you need (isNumber, toInteger, padNumber) from here:
https:// github.com/ng-bootstrap/ng-bootstrap/blob/master/src/util/util.ts
and remove the
import { isNumber, toInteger, padNumber } from ‘@ng-bootstrap/ng-bootstrap/util/util’;
and it simply works.