Topic: Angular Date Picker should be able to store date selection using a different format from its display format
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.
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
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.
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: 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