15 thoughts on “NgbDate culture format and initial model?

  1. There are 2 separate, although related parts of your question, let me tackle it one by one.

    1. How to control date parsing (from user input) and formatting (in the input field).

    As of today this is abstracted away behind the NgbDateParserFormatter contract, see here:

    export abstract class NgbDateParserFormatter {
    abstract parse(value: string): NgbDate;
    abstract format(date: NgbDate): string;

    By default the datepicker comes with the basic implementation of this interface that just accepts dates in the ISO format. If you want to handle a different format (or multiple formats) you can provide your own implementation of the NgbDateParserFormatter and register it as a provider in your module.

    We might have a separate implementation in the future (say NgbMomentJSParserFormatter or a completely custom one) depending on the interest from the community. In any case you’ve got a flex point today.

    1. How do use strings as a model

    There is not great story for this as there is a missing robust support for model transformation in the angular itself. See discussion in the timepicker-related issue for more details: #545

  2. I’ve created a small example for those who are looking for an actual implementation.
    You can look at it here.

    Keep in mind that I only added necessary lines, it’s not functionnal alone.
    Btw, I had to manually add padNumber(), isNumber() and toInteger() from util.ts, is there something I missed ?

    1. How do use strings as a model

    There is not great story for this as there is a missing robust support for model transformation in the angular itself. See discussion in the timepicker-related issue for more details: #545

    After trying to monkey patch this datepicker to use in an application where dates come from a database via a web service, I appreciate the difficulties given the current state of Angular. It is unfortunate though, since not being able to use an ISO string or a Javascript date object creates way too much overhead for me to be able to use this datepicker currently.

  3. I don’t understand the use case surrounding the use of a default format NgbDateStruct and not allowing for a date formatted string as an alternative. I don’t think I’ve ever needed a date formatted like NgbDateStruct, and there is clear confusion from anyone trying to use the date picker on StackOverflow and many other forums on how to customize the provider to use a string. I tried to do the same by overriding the provider with my own, but there isn’t anyway to get around NgbDateStruct. Can this feature not be implemented? It feels like the use case of a date formatted string would be well received as a secondary option to the use of NgbDateStruct.

  4. I have to attach to this topic.
    I also think that returning only NgbDateStruct is a bad aproach. There should be implemented way to choose a model format.

  5. We will support different models in datepicker (on top of NgbDateStruct) very soon, please see: #1816. If anyone is interested in having it sooner please have a look at the PR, review it, get for a test drive etc. This would be helpful and would speed up things!

  6. The problem I had was pre-filling using reactive forms.
    If it helps anyone what I did eventually was using ngModel in conjunction with formControlName:
    <input ngbDatepicker formControlName="startDate" [(ngModel)]="initialStartDate">

    In the model:
    this.startDate[0] = data.start_date; // in string format as received from DB

    In the component, converting string date into NgbDateStruct:

    // Edit mode - workaround for pre-filling the date input
    if (this.milestones.controls['startDate'].value) {
      let parts = this.milestones.controls['startDate'].value.split('-');
      this.initialStartDate = {
        year: parseInt(parts[0]), 
        month: parseInt(parts[1]), 
        day: parseInt(parts[2])
  7. @asadsahi, yeah, that’s another point. We’re missing the “Overview” tab for each component now 🙂

    <input [(ngModel)]="model" ngbDatepicker />
    • NgbDateAdapter does the conversion between your user model and internal one (NgbDateStruct), so you could use anything you want as model type, like native JS Date. Better check the demo code.

    • NgbParserFormatter does the conversion between the string that is displayed/entered in the input element and the internal one (NgbDateStruct)

  8. Who are you writing this component for?

    If you cannot offer a simple attribute for a developer to specify a god damn string format for the date, what in the world are you doing?!

    Writing custom “adapters” “formatters” god knows what instead of a simple: format=”dd/mm/yyyy”

    This is a big strong fail. Unbelievable you are spending so much time and making everyone else spend so much time on something as trivial as “setting the goddamn format of a date string.”

    Are you kidding?!