Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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;
}
}
@JunusErgin

This comment has been minimized.

Copy link

@JunusErgin JunusErgin commented Jan 31, 2017

Great, thanks for sharing this! 👍

@atamas101

This comment has been minimized.

Copy link

@atamas101 atamas101 commented Jun 10, 2017

thanks a lot for sharing!

@Darshana-Waasala

This comment has been minimized.

Copy link

@Darshana-Waasala Darshana-Waasala commented Jun 14, 2017

Thanks a lot. It saved a lot of time....

@yangzhaohui89

This comment has been minimized.

Copy link

@yangzhaohui89 yangzhaohui89 commented Jul 24, 2017

why so hard to set a default value for datepicker?.............................

@rixlabs

This comment has been minimized.

Copy link

@rixlabs rixlabs commented Jul 24, 2017

I don't understand when the parse method is used.

Tryed to debug but it seems that is never called

@SvenDhaens

This comment has been minimized.

Copy link

@SvenDhaens SvenDhaens commented Jul 25, 2017

Awesome, thank you.

@AndersonSM

This comment has been minimized.

Copy link

@AndersonSM AndersonSM commented Jul 28, 2017

Worked for me. Thanks a lot!

@AndreiTudose95

This comment has been minimized.

Copy link

@AndreiTudose95 AndreiTudose95 commented Aug 23, 2017

Does its job. Thank you!

@zphtry

This comment has been minimized.

Copy link

@zphtry zphtry commented Sep 5, 2017

Thank you so much. I could not make this feature work in my app without your example.

@moussa-b

This comment has been minimized.

Copy link

@moussa-b moussa-b commented Sep 7, 2017

You are hero! Thanx a lot for your code, I copied/pasted it as is in my project and works like a charm.

@JavanXD

This comment has been minimized.

Copy link

@JavanXD JavanXD commented Sep 12, 2017

Thank you!

@Taha-Di-Nero

This comment has been minimized.

Copy link

@Taha-Di-Nero Taha-Di-Nero commented Sep 15, 2017

Thanks a lot

@denernun

This comment has been minimized.

Copy link

@denernun denernun commented Sep 23, 2017

Great job! Thank you!

@ikomangmahendra

This comment has been minimized.

Copy link

@ikomangmahendra ikomangmahendra commented Sep 24, 2017

many thanks!

@daviddelasota

This comment has been minimized.

Copy link

@daviddelasota daviddelasota commented Sep 24, 2017

Hello everyone, I'm new to angular, having a datepicker is a headache, I need your help please, already correctly implement app.component.ts and ngb-date-fr-parser-formatter.ts as it appears in the example, but I lack the knowledge as the functions are executed

@LordAlastair

This comment has been minimized.

Copy link

@LordAlastair LordAlastair commented Oct 27, 2017

Thank you!

@sprzedwojski

This comment has been minimized.

Copy link

@sprzedwojski sprzedwojski commented Oct 30, 2017

Perfect, thanks! You saved me a lot of time :)

@borriej

This comment has been minimized.

Copy link

@borriej borriej commented Nov 4, 2017

thank you

@ingmmurillo

This comment has been minimized.

Copy link

@ingmmurillo ingmmurillo commented Nov 8, 2017

Thanks!

@ghobashy

This comment has been minimized.

Copy link

@ghobashy ghobashy commented Nov 24, 2017

format(date: NgbDateStruct), date variables seems to be always null when debugging and not date pre-filled. any suggestions?

@armandoxxx

This comment has been minimized.

Copy link

@armandoxxx armandoxxx commented Dec 6, 2017

got it working by adding my custom formatting class to app.module.ts instead of app.component.ts
providers: [ ... {provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter} ],

@ibenjelloun

This comment has been minimized.

Copy link

@ibenjelloun ibenjelloun commented Dec 15, 2017

Thanks !

@Shulkio

This comment has been minimized.

Copy link

@Shulkio Shulkio commented Dec 21, 2017

Works as a charm, thanks a lot :)

@leofiore99

This comment has been minimized.

Copy link

@leofiore99 leofiore99 commented Dec 21, 2017

I need to parse the value to a Date when I'll add an item. Why the method parse is not called? What I supposed to do? Thanks!

@toeyya

This comment has been minimized.

Copy link

@toeyya toeyya commented Dec 22, 2017

Thanks ! 👍

@arunbarani

This comment has been minimized.

Copy link

@arunbarani arunbarani commented Jan 24, 2018

I need to show initial value, but parse function doesn't call, so my initial value is not showing. Any suggestion for this?

@ravi2solanki

This comment has been minimized.

Copy link

@ravi2solanki ravi2solanki commented Jan 31, 2018

Thanks man, its working they way i want

@Andi-Lo

This comment has been minimized.

Copy link

@Andi-Lo Andi-Lo commented Feb 9, 2018

Could you @nrobinaubertin provide a license to that gist?

@nrobinaubertin

This comment has been minimized.

Copy link
Owner Author

@nrobinaubertin nrobinaubertin commented Feb 27, 2018

@Andi-Lo Really ? It's WTFPL Version 2.

@Sergi0Martin

This comment has been minimized.

Copy link

@Sergi0Martin Sergi0Martin commented Mar 2, 2018

Thanks a lot!

@JorisCornelis

This comment has been minimized.

Copy link

@JorisCornelis JorisCornelis commented Mar 3, 2018

Wow thank you MISTER!

@diogoSpaiva

This comment has been minimized.

Copy link

@diogoSpaiva diogoSpaiva commented Apr 5, 2018

Thanks a lot!

@Wendkouny

This comment has been minimized.

Copy link

@Wendkouny Wendkouny commented May 29, 2018

ok for me, thanks a lot !

@jeroenheijmans

This comment has been minimized.

Copy link

@jeroenheijmans jeroenheijmans commented Jun 3, 2018

This was a helpful gist. Here's a dd-MM-yyyy spinoff:

// Formatter using "dd-MM-yyyy" string format:
class NgbDateStringParserFormatter extends NgbDateParserFormatter {
  parse(value: string): NgbDateStruct {
    if (!value) { return null; }

    const parts = value.trim().split('-');
    
    return {
      day: parts.length > 0 ? parseInt(parts[0], 10) : null,
      month: parts.length > 1 ? parseInt(parts[1], 10) : null,
      year: parts.length > 2 ? parseInt(parts[2], 10) : null,
    };
  }

  format(date: NgbDateStruct): string {
    const pad = (n) => Number.isInteger(n) ? ('0' + n).substr(-2) : '';
    return date ? `${pad(date.day)}-${pad(date.month)}-${date.year}` : '';
  }
}

You might need to polyfill or change the usage of Number.isInteger depending on your browser support.

@FintanK

This comment has been minimized.

Copy link

@FintanK FintanK commented Jul 3, 2018

Thank you @nrobinaubertin !

@rahulz-wasnik

This comment has been minimized.

Copy link

@rahulz-wasnik rahulz-wasnik commented Jul 10, 2018

Thank for the second post from the top.... works like a charm....... just started working with Angular ... can't believe people have been using it since 2 years

@MaxiAringoli

This comment has been minimized.

Copy link

@MaxiAringoli MaxiAringoli commented Aug 19, 2018

Very usefull, thanks

@rvaliev

This comment has been minimized.

Copy link

@rvaliev rvaliev commented Sep 11, 2018

Thanks!

@chicojunior

This comment has been minimized.

Copy link

@chicojunior chicojunior commented Oct 31, 2018

Thanks!

@hieugie

This comment has been minimized.

Copy link

@hieugie hieugie commented Dec 6, 2018

MANY THANKS, BROS

@wuilliam321

This comment has been minimized.

Copy link

@wuilliam321 wuilliam321 commented Dec 14, 2018

Excellent it still working

@jocafi

This comment has been minimized.

Copy link

@jocafi jocafi commented Jan 21, 2019

Great. Thanks, man !!!

@Hir0ta

This comment has been minimized.

Copy link

@Hir0ta Hir0ta commented Jan 31, 2019

Awesome! Thank you!

@Nirmalkumar941

This comment has been minimized.

Copy link

@Nirmalkumar941 Nirmalkumar941 commented Mar 7, 2019

thanks a lot

@nowsathns

This comment has been minimized.

Copy link

@nowsathns nowsathns commented Mar 21, 2019

Awesome! Thanks a lot.

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

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

@zambonni

This comment has been minimized.

Copy link

@zambonni zambonni commented Apr 16, 2019

Thanks!

@amatosg

This comment has been minimized.

Copy link

@amatosg amatosg commented May 21, 2019

ho do you implement this in the html file?

@lbs-rodrigo

This comment has been minimized.

Copy link

@lbs-rodrigo lbs-rodrigo commented Jun 22, 2019

Perfect!

@npquang

This comment has been minimized.

Copy link

@npquang npquang commented Jul 11, 2019

Perfect!
Thanks for sharing.

@DavidZam

This comment has been minimized.

Copy link

@DavidZam DavidZam commented Jul 26, 2019

Works like a charm! Thanks!!

@faris-dude

This comment has been minimized.

Copy link

@faris-dude faris-dude commented Aug 23, 2019

Thanks dude..

@chrisjaimes

This comment has been minimized.

Copy link

@chrisjaimes chrisjaimes commented Sep 8, 2019

Beautiful :) thanks!

@eypugazh

This comment has been minimized.

Copy link

@eypugazh eypugazh commented Sep 20, 2019

Great Its works.. Thanks

@monir-tuhin

This comment has been minimized.

Copy link

@monir-tuhin monir-tuhin commented Nov 6, 2019

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

@Ranjith9353

This comment has been minimized.

Copy link

@Ranjith9353 Ranjith9353 commented Dec 12, 2019

Thanks a lot

@lodestar-sr

This comment has been minimized.

Copy link

@lodestar-sr lodestar-sr commented Feb 11, 2020

Thank you so much!!!

@UsmanMajied17

This comment has been minimized.

Copy link

@UsmanMajied17 UsmanMajied17 commented Jul 21, 2020

Thank you so much. It worked like a charm

@biswajit-navsoft

This comment has been minimized.

Copy link

@biswajit-navsoft biswajit-navsoft commented Dec 23, 2020

Thank you so much..

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