[Feature Request] Add custom NgbInputDatepicker implementation

[amatosg]

Overview of the feature request

Currently, date picker only allows YYYY-MM-DD format. By adding a custom implementation, users will be able to choose the format she/he desires.

Motivation for or Use Case

Being able to choose the format I want to show in a date picker.

Related issues or PR

No issues/PR found

Proposal

I created a files called shared/component/ngb-custom-date-parser-formatter.ts with following content:

import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { Injectable } from '@angular/core';
import * as moment from 'moment';

@Injectable()
export class NgbCustomDateParserFormatter extends NgbDateParserFormatter {

  constructor(private momentFormat: string) {
    super();
  };

  format(date: NgbDateStruct): string {
    if (date === null) {
      return '';
    }
    const d = moment({ year: date.year,
      month: date.month - 1,
      date: date.day });
    return d.isValid() ? d.format(this.momentFormat) : '';
  }

  parse(value: string): NgbDateStruct {
    if (!value) {
      return null;
    }
    const d = moment(value, this.momentFormat);
    return d.isValid() ? { year: d.year(),
      month: d.month() + 1,
      day: d.date() } : null;
  }
}

In my app.module.ts file I added this line: (maybe the format could be saved in a config file?)

providers: [
    {
      provide: NgbDateParserFormatter,
      useValue: new NgbCustomDateParserFormatter("DD/MM/YYYY")
    }
  ],

After that, I was able to show my dates as wished:

• [x] Checking this box is mandatory (this is just to show you read everything)

Love JHipster? Please consider supporting our collective: 👉 https://opencollective.com/generator-jhipster/donate

[amatosg]

I need complete code from ngb-custom-date-parser-formatter.ts to html.

There is no html change needed for this to work. The generated code will show dates in the desired format.

[aleksandar-budisa]

Works, thanks very much.

[mraible]

Closing because of @amatosg's comment:

There is no html change needed for this to work. The generated code will show dates in the desired format.

[aleksandar-budisa]

Where and how and I will do it ? I don't remember when and where I write this.

уто, 31. мар 2020. у 01:31 Alejandro Matos [email protected] је написао/ла:

@aleksandar-budisa https://github.com/aleksandar-budisa then please delete the comments to keep the issye clean. Thanks

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jhipster/generator-jhipster/issues/11525#issuecomment-606305885, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHXWKMCHWLDSRP3VCESIJITRKETUBANCNFSM4LV2OWCQ .

[amatosg]

@mraible sorry, I don't see the relation between my comment and the closure of this issue. What I meant is that the changes needed were only the new ParserFormatter file and add the record in app.model.ts but nothing have to be changed in the HTML file

[mraible]

OK, reopening.

[amatosg]

I'm going to wait until next release if that's ok

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Our core developers tend to be more verbose on denying. If there is no negative comment, possibly this feature will be accepted. We are accepting PRs :smiley:. Comment or this will be closed in 7 days

[DanielFran]

@amatosg Are you willing to give it a shot again?

[amatosg]

@DanielFran I don't know how to create new files, do I just create the ejs file? :/

[Tcharl]

@amatosg You should create a new ejs file and also reference it in the according section of the relative 'file.js'