Topic: Angular Date Picker should be able to store date selection using a different format from its display format

gordonBP3 pro asked 5 years ago


I am currently using a the Angular Date Picker in a standard input screen. I want to display the date in the format "mmmm d, yyyy", but I need to pass the selected date to another system that requires a JavaScript date. Even if I could store the date as a string, I wouldn't want to use this format. It would be much easier to use this control if the binding were treated separately from the display format.


Arkadiusz Idzikowski staff answered 5 years ago


Please try to use object instead of string:

model = { date: { year: 2018, month: 10, day: 15 } };


gordonBP3 pro commented 5 years ago

Thank you. That works for an initial selection.

I'm still having an issue though. My date picker is inside of a div that uses *ngIf. The following steps still give me an issue:

1. Select a date

2. Hide the div

3. Show the div

This results in -1 for the day and year. Do you have any ideas for fixing this?


Arkadiusz Idzikowski staff commented 5 years ago

I'm afraid there is no quick solution for that. We need to take a closer look at this problem and fix it on our end. From what I found it doesn't occur when date format is set to default.


gordonBP3 pro answered 5 years ago


In my app, I'm using the date picker like this:

<mdb-date-picker id="dateOfBirth" [(ngModel)]="mortgageDetails.borrower.dateOfBirth" name="dateOfBirth" [options]="datePickerOptions" placeholder="Date of Birth" required></mdb-date-picker>
public datePickerOptions: IMyOptions = {
dateFormat: 'mmmm d, yyyy',
firstDayOfWeek: 'su',
closeAfterSelect: true,
minYear: 1900,
disableSince: {year: new Date().getFullYear(), month: new Date().getMonth() + 1, day: new Date().getDate()},
showTodayBtn: false,
showClearDateBtn: true,
markCurrentDay: true
};

I want to be able to hide the component, and make it reappear with the selected date intact. Right now, when I show the component with a date set, it shows "undefined -1, -1".


Arkadiusz Idzikowski staff commented 5 years ago

What do you pass to ngModel to set default date? It's a string or some kind of object?


gordonBP3 pro commented 5 years ago

I'm using a string right now, but I think I would rather use a date. I don't really care as long as the control works properly.


Arkadiusz Idzikowski staff answered 5 years ago


Hello,

Could you provide an example with expected behavior?

There is a (dateChanged) output that emit object with date formatted as string and object with year, month and day property. I hope that will be helpful in your case.

Regards,

Arek



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: Macbook Pro
  • Browser: Chrome
  • OS: Mac OS Mojave
  • Provided sample code: No
  • Provided link: No