How to add a manual date range input field in an angular picker component

Question

I am trying to add a manual date range input field in an Angular calendar picker. Specifically, I would like to have two date input fields above the calendar that can allow the user to type in the date range instead of scrolling through months on the calendar.

My current solution was to edit the default calendar header by defining a template and inserting my custom date input pickers. However, as soon as I added this default header component, all functionality was lost.

How can I keep the date range functionality from the default date range Angular component, but also add a manual date picker above the calendar?

Below is my custom header component, but does not have any functionality

Below is a working angular calendar component without the custom input range picker

calendar.html

@Component({
  selector: 'calendar',
  templateUrl: '.calendar.component.html',
  styleUrls: ['.calendar.component.scss'],
  providers: [
    {
      provide: DateAdapter,
      useClass: CustomDateAdapter,
      deps: [MAT_DATE_LOCALE, Platform],
    },
  ],
})
export class DateSearchFilterComponent implements OnInit {
  calendarHeader = CalendarHeaderComponent;
  numberOfReschedules: number | null | undefined;
  selectedDateOptions: DateFilterOptions = {
    [DateFilterType.issueDateFilters]: [],
    [DateFilterType.actionDateFilters]: [],
  };

  min: Date = new Date('January 1, 1980');
  today: Date = new Date();
  oneYearFromToday: Date = new Date();

  dateFields: FilterGroup[] = [
    {
      id: DateFilterType.issueDateFilters,
      label: 'CAP DATES',
      fields: [
        {
          name: 'Origination Date',
          dateType: IssueDateType.OriginationDate,
          max: this.today,
        },
        {
          name: 'Discovery Date',
          dateType: IssueDateType.DiscoveryDate,
          max: this.today,
        },
        {
          name: 'Completion Date',
          dateType: IssueDateType.CompletionDate,
          max: this.today,
        },
      ],
    },
  ];

  constructor(
    private activatedRoute: ActivatedRoute,
    private queryParameters: QueryParametersService,
    public featureFlags: FeatureFlagsService,
    private advancedSearch: AdvancedSearchService
  ) {
    this.oneYearFromToday.setFullYear(this.oneYearFromToday.getFullYear() + 1);
    if (this.featureFlags.isFeatureEnabled('action-dates-filter')) {
      this.dateFields.push({
        id: DateFilterType.actionDateFilters,
        label: 'ACTION DATES',
        fields: [
          {
            name: 'Origination Date',
            dateType: ActionDateType.OriginationDate,
            max: this.today,
          },
          {
            name: 'Due Date',
            dateType: ActionDateType.DueDate,
            max: this.oneYearFromToday,
          },

          {
            name: 'Completion Date',
            dateType: ActionDateType.CompletionDate,
            max: this.today,
          },
          {
            name: 'Due Date Extension Count',
            dateType: IssueDateType.CompletionDate,
            max: Number.MAX_SAFE_INTEGER,
          },
        ],
      });
    }
  }

  ngOnInit(): void {
    this.subscribeToServiceOnInit();
  }

  subscribeToServiceOnInit = (): Subscription => {
    return this.activatedRoute.queryParams
      .pipe(
        map((data) => this.queryParameters.deserializeQueryParams(data)),
        untilDestroyed(this)
      )
      .subscribe((res) => {
        let { issueDateFilters, actionDateFilters } = res;
        if (!issueDateFilters) issueDateFilters = [];
        if (!actionDateFilters) actionDateFilters = [];
        this.selectedDateOptions = { issueDateFilters, actionDateFilters };
        this.numberOfReschedules = res.numberOfReschedules;
      });
  };
/** Custom header component for datepicker. */
@Component({
  selector: 'app-calendar-header'
  ],
  template: `
    
      
        
        {{ periodLabel }}
        
      

      
        
          From
          
        
        —
        
          To
          
        
      
    
  `,
  // changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CalendarHeaderComponent implements OnDestroy {
  private destroyed = new Subject();

  constructor(
    private calendar: MatCalendar,
    private dateAdapter: DateAdapter,
    @Inject(MAT_DATE_FORMATS) private dateFormats: MatDateFormats,
    cdr: ChangeDetectorRef
  ) {
    calendar.stateChanges
      .pipe(takeUntil(this.destroyed))
      .subscribe(() => cdr.markForCheck());
  }

  ngOnDestroy() {
    this.destroyed.next();
    this.destroyed.complete();
  }

  get periodLabel() {
    return this.dateAdapter
      .format(this.calendar.activeDate, this.dateFormats.display.monthYearLabel)
      .toLocaleUpperCase();
  }

  previousClicked(mode: 'month' | 'year') {
    this.calendar.activeDate =
      mode === 'month'
        ? this.dateAdapter.addCalendarMonths(this.calendar.activeDate, -1)
        : this.dateAdapter.addCalendarYears(this.calendar.activeDate, -1);
  }

  nextClicked(mode: 'month' | 'year') {
    this.calendar.activeDate =
      mode === 'month'
        ? this.dateAdapter.addCalendarMonths(this.calendar.activeDate, 1)
        : this.dateAdapter.addCalendarYears(this.calendar.activeDate, 1);
  }
}

 
          
            {{
              !(determineFilterIndex(input.id, field.dateType) !== -1)
                ? 'Select...'
                : ''
            }}

How to add a manual date range input field in an angular picker component

0 Answers