如何禁用 ion-datetime 中的特定日期？

Question

I am using ion-datetime for selecting a particular date in my Ionic3/Angular application. I want to disable certain specific dates in ion-datetime . I have checked the documentation but there is no hint on how can i achieve that.

Can anyone help on that?

Answer 1

Looks like it is not possible to disable particular days/dates using ion-datetime of ionic3.

Check out documentation for more functions and information:

https://ionicframework.com/docs/api/components/datetime/DateTime/

Alternatively, you can do it with libraries like this:

https://github.com/rajeshwarpatlolla/ionic-datepicker

Answer 2

TL;DR - [isDateEnabled]="isBlockedDate" - calculate blocked dates with this, passes a string of the date being checked (eg '2022-08-23')

--

In Ionic 6 you can utilise the new isEnabledDate property to check against dates you'd like to block.

• More info here: https://ionicframework.com/docs/api/datetime#advanced-date-constraints

isBlockedDate = (dateString: string) => {
  const result = this.current_month_blockout_dates.some((date) => {
    let interstitial_date = `${date.years}-${('0' + (date.months)).slice(-2)}-${date.date}`;
    // eg. comparing 2022-08-21 with 2022-08-12
    return dateString == interstitial_date;
  });
  if(result === true) {
    console.log(`Blocked confirmation for date: ${dateString}`, result);
  }
  return !result;
}

So provided you have a this.current_month_blockout_dates populated with an array of dates; read how the code interprets, above:

this.current_month_blockout_dates = [{years:'2022', months:'10', date:'14'}];

Usage would then be [isDateEnabled]="isBlockedDate" ie:

<ion-datetime 
#orderDatePicker 
id="orderDatePicker"
size="fixed"
(click)="createDateListeners()"
[isDateEnabled]="isBlockedDate"
presentation="date"
max="2025"
[min]="todaysDate">
</ion-datetime>

Bonus Tip
You can add an observer to know when the month is changed and recalculate your blocked dates like so:

createDateListeners() {
  // Observe Date changes
  const self = this;
  var previous = '';
  const targetNode = document.querySelector('ion-datetime#orderDatePicker');
  const config = { attributes: true, childList: true, subtree: true };
  const callback = function(mutationsList, observer) {
      for(const mutation of mutationsList) {
          if (mutation.type === 'attributes') {
              var e = document.querySelector('ion-datetime#orderDatePicker').shadowRoot.querySelector('ion-label').textContent;
              if(e !== previous)
              {
                  previous = e;
                  console.log('[Date Listener]: e', e);
                  let date_interpret = new Date(e);
                  self.current_month = date_interpret.getMonth()+1;
                  console.log('[Date Listener]: Current month', self.current_month);
                  self.current_month_blockout_dates = self.checkMonth(self.current_month);
                  
                  return;
              }
          }
      }
  };
  const observer = new MutationObserver(callback);
  observer.observe(targetNode, config);
}

My code uses a function called checkMonth , yours can be your own. Good luck.