Topic: Angular Date Picker should be able to store date selection using a different format from its display format
gordonBP3 pro asked 6 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 6 years ago
Please try to use object instead of string:
model = { date: { year: 2018, month: 10, day: 15 } };
gordonBP3 pro commented 6 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 6 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 6 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 6 years ago
What do you pass to ngModel to set default date? It's a string or some kind of object?
gordonBP3 pro commented 6 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 6 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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