Can someone assist me in creating a calendar feature for my app? My concept involves a button with text that, when clicked by the user, opens a calendar. However, I am encountering an error message:
ERROR Error: Uncaught (in promise): TypeError: Cannot set properties of null (setting 'isDateEnabled') TypeError: Cannot set properties of null (setting 'isDateEnabled')
The HTML code snippet is shown below:
<ion-content [fullscreen]="true">
<ion-grid>
<ion-row>
<ion-col size="12">
<div class="buttons-wrapper">
<ion-button fill="clear" id="kolendar" expand="block" datetime="datetime">
<ion-icon slot="start" name="calendar-outline"></ion-icon>
<p>Set delivery date<br/>
<span>Set delivery lorem ipsum</span></p>
</ion-button>
</div>
</ion-col>
</ion-row>
</ion-grid>
<ion-modal [keepContentsMounted]="true">
<ng-template>
<ion-datetime
id="datetime"
presentation="date"
locale="sl-SL"
[firstDayOfWeek]="1"
color="vigros"
[showDefaultButtons]="true"
doneText="Shrani"
cancelText="Prekliči">
</ion-datetime>
</ng-template>
</ion-modal>
</ion-content>
Additionally, here is the corresponding .ts file segment:
ngOnInit() {
const isDateEnabled = (dateIsoString: string) => {
const date = new Date(dateIsoString);
if (getDate(date) === 25 && getMonth(date) === 11) {
return false;
}
return !isWeekend(date);
};
const datetime = document.querySelector('ion-datetime');
datetime.isDateEnabled = isDateEnabled;
}
I have noticed that if I relocate the datepicker outside of the modal, the app compiles without any issues. What could be causing this problem? Any insights or guidance would be greatly appreciated.