Problem with <ion-datetime>

Ionic Framework Ionic Angular
1

Hello, this is my first ever Ionic project and I am trying to include a date picker using the ion-datetime to my app. I have a button that opens a modal with a datepicker. But when my app builds I get this error in the browser console:

Error: Uncaught (in promise): TypeError: Cannot set properties of null (setting ‘isDateEnabled’)
TypeError: Cannot set properties of null (setting ‘isDateEnabled’)

Here is the HTML layout:

<ion-content [fullscreen]="true">
  <ion-grid>
    <ion-row>
      <ion-col size="12">
        <div class="buttons-wrapper">
          <ion-button  id="kolendar" fill="clear" expand="block">
            <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 #modal trigger="kolendar" [initialBreakpoint]="0.5" [breakpoints]="[0, 0.5]">
    <ng-template>
      <ion-content class="ion-padding">
        <ion-datetime
          #kolendar
          id="datetime"
          presentation="date"
          locale="sl-SL"
          [firstDayOfWeek]="1"
          color="vigros"
          [showDefaultButtons]="true"
          doneText="Shrani"
          cancelText="Prekliči"
          (ionChange)="dateChange(kolendar.value)">
        </ion-datetime>
      </ion-content>
    </ng-template>
  </ion-modal>

Here is the typescript code:

  ngAfterContentInit() {
    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 tried using ngOnInit and this ngAfterContetnInit and get the same error? What have I done wrong?

2

Hi,
as first thing you don’t need to access your ion-datetime through query selector.

you must use [isDateEnabled] prop directly in your html component


<ion-content [fullscreen]="true">
  <ion-grid>
    <ion-row>
      <ion-col size="12">
        <div class="buttons-wrapper">
          <ion-button  id="kolendar" fill="clear" expand="block">
            <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 #modal trigger="kolendar" [initialBreakpoint]="0.5" [breakpoints]="[0, 0.5]">
    <ng-template>
      <ion-content class="ion-padding">
        <ion-datetime
          #kolendar
          id="datetime"
          presentation="date"
          locale="sl-SL"
          [firstDayOfWeek]="1"
          color="vigros"
          [showDefaultButtons]="true"
          doneText="Shrani"
          cancelText="Prekliči"
          [isDateEnabled]="isWeekday"
         >
        </ion-datetime>
      </ion-content>
    </ng-template>
  </ion-modal>

and then in your .ts file having something like this

export class YourComponent {

  isWeekday = (dateString: string) => {
    const date = new Date(dateString);
    const utcDay = date.getUTCDay();
    return utcDay !== 0 && utcDay !== 6;
  };

  constructor() { }

}
1 Like
3

Thank you :slight_smile: it works now

4

perfect! :slight_smile:
let me know if you need further help

1 Like
5

Hey actually I do :slight_smile:
I want to achieve that a user can click a date and save it (for now console log it) and I want to have todays date set as preselected :slight_smile: if that is possible?
I have tried doing it like this now:

HTML:

<ion-datetime
  #datetime
  id="datetime"
  presentation="date"
  locale="sl-SL"
  [firstDayOfWeek]="1"
  color="vigros"
  [showDefaultButtons]="true"
  [value]="dateValue"
  doneText="Shrani"
  cancelText="Prekliči"
  [isDateEnabled]="isWeekday"
  (ionChange)="dateChanged(datetime.value)">
</ion-datetime>

<ion-button (click)="submitOrder()">
  <span>{{ totalCartPrice | currency:'EUR':'symbol':'1.2-2':'sl-SI'}}</span>
</ion-button>

TS:

export class CartPage implements OnInit, OnDestroy {
  dateValue = format(new Date(), 'dd.MM.yyyy');
  isWeekday = (dateString: string) => {
    const date = new Date(dateString);
    const utcDay = date.getUTCDay();
    return utcDay !== 0 && utcDay !== 6;
  };

  dateChanged(value) {
    console.log('Selected date: ', value);
    this.dateValue = value;
  }

  submitOrder() {
    console.log('Order sent', '+', 'delivery date set to: ', this.dateChanged);
    this.clearCart();
  }
}

I am getting these two errors:

Cannot destructure property ‘month’ of '(0 , parse_decd0f85_js__WEBPACK_IMPORTED_MODULE_9_.N)
TypeError: Cannot read properties of undefined (reading ‘month’)

6

my suggestion is reading the documentation, is well explained.

Anyway you must, on ionViewWillEnter function get the current date in the format “yyyy-mm-dd” and then using it as [min] date in your component.

for showing the value in console.log just do this:

(ionChange)="this.yourDateValue = datetime.value + '';   showCalendarValue() ">

showCalendarValue() {
console.log(this.yourDateValue);
7

How do I get this yourDateValue? I keep getting this error about the month

8

you must assign the value coming from ion-datetime

1 Like