Description
Prequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already report this problem, without success.
Ionic Framework Version
- v4.x
- v5.x
- v6.x
Current Behavior
The datetime component works really fine when I used in the page directly. On the contrary, when I try to open it with an ion-modal the component broke. The datetime seems to display correctly in the modal, and when I select a date of the same month as the current one it works correctly. However, as soon as I want to change the month using the top buttons or the scroll, the component does not update the months in the upper part of the date-picker (in addition, it only lets you advance or go back one month with respect to the current one, both through the upper buttons and through scroll). However, when you start punching on any date the component only advances to the next month.
See the video for a better compression of the problem (sorry for the low quality). In the first seconds when dates relative to the current month were selected it worked, however, as soon as you want to change the month strange behaviors appear:
VID_20210929_121229.1.mp4
I tried with diffent widths and heigths but I can't resolve the issue.
Expected Behavior
The datepicker should work the same way inside an ion-modal / popover as it does outside of them.
Steps to Reproduce
- Create a project with the beta 6 of Ionic v6
- Create a container that opens the modal
<div (click)="openDateModal()" class="container"> Open Date Modal </div>
- Create the corresponding function to open it
dateModal: HTMLIonModalElement;
async openDateModal() {
this.dateModal = await this.modalCtrl.create({
component: DatePickerPage,
cssClass: 'modal-with-transparency',
});
this.dateModal.onDidDismiss().then((data) => {
this.selectedTime = data.data;
});
return this.dateModal.present();
}
- Create a new page with the following code, that will contain the datepicker:
html
<div id="background" (click)="dismiss($event)">
<ion-datetime id="picker" [(ngModel)]="date">
<ion-buttons slot="buttons">
<ion-button (click)="confirm()">Done!</ion-button>
</ion-buttons>
</ion-datetime>
</div>
css
ion-datetime {
height: min(60%, 500px);
width: min(85%, 340px);
}
#background {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
ts
date: any;
constructor(private modalCtrl: ModalController) {}
ngOnInit() {}
dismiss(e) {
if (e.target.id == 'background') {
this.modalCtrl.dismiss();
}
}
confirm() {
const datetime = <any>document.querySelector('#picker');
datetime.confirm().then((res) => {
this.modalCtrl.dismiss(new Date(this.date));
});
}
Code Reproduction URL
No response
Ionic Info
Ionic:
Ionic CLI : 6.17.1 (C:\Users\kikel\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.0.0-beta.6
@angular-devkit/build-angular : 12.1.4
@angular-devkit/schematics : 12.1.4
@angular/cli : 12.1.4
@ionic/angular-toolkit : 4.0.0
Capacitor:
Capacitor CLI : 3.2.3
@capacitor/android : 3.2.3
@capacitor/core : 3.2.3
@capacitor/ios : not installed
Utility:
cordova-res : 0.15.3
native-run : 1.4.1
System:
NodeJS : v14.15.4 (C:\Program Files\nodejs\node.exe)
npm : 6.14.10
OS : Windows 10
Additional Information
No response