CODEWITHSUNDEEP
javascriptdatetimeionic-frameworkionic3
Setu Kumar Basak
Setu Kumar Basak

Reputation: 12022

How to disable specific dates in ion-datetime?

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?

Upvotes: 3

Views: 4423

Answers (3)

Brandon
Brandon

Reputation: 15

this works for me

page.html

<ion-datetime
 presentation="date"
 locale="es-ES"
 hourCycle="h24"
 [min]="minDate"
 [isDateEnabled]="isDateEnabled"
></ion-datetime>

page.ts

  disabledDatesArray: string[] = ['2024-01-22', '2024-01-29'];

  isDateEnabled = (dateString: string) => {
    const date = new Date(dateString);
    const formattedDate = this.formatDateUTC(date);

    return !this.disabledDatesArray.includes(formattedDate);
  };

  private formatDateUTC(date: Date): string {
    const year = date.getUTCFullYear();
    const month = (date.getUTCMonth() + 1).toString().padStart(2, '0');
    const day = date.getUTCDate().toString().padStart(2, '0');

    return `${year}-${month}-${day}`;
  }

Upvotes: 0

Grant
Grant

Reputation: 6329

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.

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.

Upvotes: 0

Vikasdeep Singh
Vikasdeep Singh

Reputation: 21766

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

Upvotes: 1

Related Questions