date picker enabledDates

[ricardosaracino]

It would be nice to have an enabledDates property on date picker that behaves the same way as the disabledDates

https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxDatePickerComponent.html#disabledDates

[ddaribo]

Hi @ricardosaracino,

Thank you for your suggestion!

In general, adding such a property would duplicate the functionality of setting the disabled dates, where obviously the non-disabled ones are enabled. We tend to avoid such duplications in the API, when the “reverse” could be achieved in a straightforward manner.

Hence, I am wondering what are the specifics of your scenario that would require explicitly defining the enabled dates? I am asking this, as currently, it is considered that by providing various DateRangeDescriptors, any rage of dates could be disabled, again leaving the rest as enabled.

It is worth noting that setting the minValue and maxValue properties would also disable any dates lesser or greater than the pointed, leaving the rest as enabled. This works in a straightforward way for a single range of enabled dates.

For multiple ranges, one could leverage combinations of DateRangeDescriptors. To demonstrate a possible approach, I created this sample, where there are three couples of dates defined that would serve as the min and max dates for a range of enabled dates. By defining the disabledDates array in the following way, the functionality is pretty easily achieved:

  public minRange1 = new Date(2024, 4, 4);
  public maxRange1 = new Date(2024, 4, 9);

  public minRange2 = new Date(2024, 5, 4);
  public maxRange2 = new Date(2024, 5, 9);

  public minRange3 = new Date(2024, 6, 4);
  public maxRange3 = new Date(2024, 6, 9);

  public disabledDates = [
    { type: DateRangeType.Before, dateRange: [this.minRange1] },
    {
      type: DateRangeType.Between,
      dateRange: [this.maxRange1, this.minRange2],
    },
    {
      type: DateRangeType.Between,
      dateRange: [this.maxRange2, this.minRange3],
    },
    { type: DateRangeType.After, dateRange: [this.maxRange3] },
  ];

I hope these suggestions help. If you require any further assistance on the matter, please, let us know.