date-range.sample.ts

import { Component, CUSTOM_ELEMENTS_SCHEMA, DestroyRef, ViewChild } from '@angular/core';
import { JsonPipe } from '@angular/common';
import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl, ValidatorFn, AbstractControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { DateRange, IgxButtonDirective, IgxDateRangePickerComponent, IgxDateTimeEditorDirective, IgxInputDirective, IgxLabelDirective, IgxRadioComponent, IgxRippleDirective, IGX_INPUT_GROUP_TYPE, IChangeCheckboxEventArgs, IGX_DATE_RANGE_PICKER_DIRECTIVES, IgxIconComponent, IgSizeDirective, CustomDateRange, CalendarDay, DateRangeType } from 'igniteui-angular';
import { defineComponents, IgcButtonComponent, IgcDateRangePickerComponent, IgcDateTimeInputComponent, IgcIconComponent } from 'igniteui-webcomponents';
import { Properties, PropertyChangeService, PropertyPanelConfig } from '../properties-panel/property-change.service';

defineComponents(IgcDateRangePickerComponent, IgcButtonComponent, IgcIconComponent, IgcDateTimeInputComponent);

@Component({
    selector: 'app-date-range',
    templateUrl: './date-range.sample.html',
    styleUrls: ['./date-range.sample.scss'],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    providers: [
        {
            provide: IGX_INPUT_GROUP_TYPE,
            useValue: 'border'
        }
    ],
    imports: [
        IgxButtonDirective,
        IgxRippleDirective,
        FormsModule,
        IgxLabelDirective,
        IgxRadioComponent,
        ReactiveFormsModule,
        JsonPipe,
        IGX_DATE_RANGE_PICKER_DIRECTIVES,
        IgxInputDirective,
        IgxDateTimeEditorDirective,
        IgxIconComponent,
        IgSizeDirective
    ]
})
export class DateRangeSampleComponent {
    @ViewChild('dr1', { static: true })
    private dateRangePicker: IgxDateRangePickerComponent;

    public range: DateRange = { start: new Date('2000,10,1'), end: new Date('2000,10,20') };
    public range1: DateRange = { start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 5)) };
    public range2: DateRange;
    public range3: DateRange = { start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 5)) };
    public range4: DateRange;
    public range5: DateRange = { start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 5)) };
    public range6Start = null;
    public range6End = null;
    public range6: DateRange = { start: this.range6Start, end: this.range6End };
    public minDate: Date = new Date(new Date().setDate(new Date().getDate() - 20));
    public maxDate: Date = new Date(new Date().setDate(new Date().getDate() + 25));
    public today = CalendarDay.today;
    public previousThreeMonthsStart = new Date(
        this.today.native.getFullYear(),
        this.today.native.getMonth() - 3,
        1
    );
    public previousThreeMonthsEnd = new Date(
        this.today.native.getFullYear(),
        this.today.native.getMonth(),
        0
    );
    public nextThreeMonthsStart = new Date(
        this.today.native.getFullYear(),
        this.today.native.getMonth() + 1,
        1
    );
    public nextThreeMonthsEnd = new Date(
        this.today.native.getFullYear(),
        this.today.native.getMonth() + 4,
        0
    );
    public customRanges : CustomDateRange[] = [
        { label:"Next three months", dateRange: {start: this.nextThreeMonthsStart, end: this.nextThreeMonthsEnd} },
        { label:"Previous three months", dateRange: {start: this.previousThreeMonthsStart, end: this.previousThreeMonthsEnd} },
    ]

    public reactiveForm: UntypedFormGroup;
    public DateRangeType = DateRangeType;

    public updateOnOptions: string[] = ['change', 'blur', 'submit'];
    public updateOn = 'blur';


    public specialDates = [{
        type: DateRangeType.Between, dateRange: [
            new Date(new Date().getFullYear(), new Date().getMonth(), 3),
            new Date(new Date().getFullYear(), new Date().getMonth(), 8)
        ]
    }];

    public disabledDates = [{
        type: DateRangeType.Between, dateRange: [
            new Date(new Date().getFullYear(), new Date().getMonth(), 20),
            new Date(new Date().getFullYear(), new Date().getMonth(), 25)
        ]
    }];

    public panelConfig: PropertyPanelConfig = {
        size: {
            control: {
                type: 'button-group',
                options: ['small', 'medium', 'large'],
                defaultValue: 'medium',
            }
        },
        mode: {
            control: {
                type: 'button-group',
                options: ['dropdown', 'dialog'],
                defaultValue: 'dropdown'
            }
        },
        value: {
            control: {
                type: 'date-range',
                defaultValue: this.range3
            }
        },
        minValue: {
            label: 'Min Value',
            control: {
                type: 'date',
                defaultValue: this.minDate
            }
        },
        maxValue: {
            label: 'Max Value',
            control: {
                type: 'date',
                defaultValue: this.maxDate
            }
        },
        required: {
            control: {
                type: 'boolean',
                defaultValue: false
            }
        },
        disabled: {
            control: {
                type: 'boolean',
                defaultValue: false
            }
        },
        placeholder: {
            control: {
                type: 'text',
                defaultValue: 'MM/dd/yyyy'
            }
        },
        hint: {
            label: 'Hint Text',
            control: {
                type: 'text'
            }
        },
        displayFormat: {
            label: 'Display Format',
            control: {
                type: 'text'
            }
        },
        inputFormat: {
            label: 'Input Format',
            control: {
                type: 'text'
            }
        },
        hideHeader: {
            label: 'Hide Header (for dialog mode)',
            control: {
                type: 'boolean',
                defaultValue: false
            }
        },
        orientation: {
            label: 'Orientation',
            control: {
                type: 'button-group',
                options: ['horizontal', 'vertical'],
                defaultValue: 'horizontal'
            }
        },
        headerOrientation: {
            label: 'Header Orientation (dialog mode)',
            control: {
                type: 'button-group',
                options: ['horizontal', 'vertical'],
                defaultValue: 'horizontal'
            }
        },
        headerTemplate: {
            label: 'Show Header Template (dialog)',
            control: {
                type: 'boolean',
                defaultValue: false
            }
        },
        calendarTitle: {
            label: 'Show Calendar Title (dialog)',
            control: {
                type: 'boolean',
                defaultValue: false
            }
        },
        separator: {
            label: 'Separator text',
            control: {
                type: 'text',
                defaultValue: 'to'
            }
        },
        visibleMonths: {
            label: 'Visible Months',
            control: {
                type: 'number',
                defaultValue: 2,
            }
        },
    };

    public properties: Properties;

    constructor(
        fb: UntypedFormBuilder,
        private propertyChangeService: PropertyChangeService,
        private destroyRef: DestroyRef
    ) {
        const today = new Date();
        const in5days = new Date();
        in5days.setDate(today.getDate() + 5);
        const r1: DateRange = { start: new Date(today.getTime()), end: new Date(in5days.getTime()) };
        const r2: DateRange = { start: new Date(today.getTime()), end: new Date(in5days.getTime()) };
        this.reactiveForm = fb.group({
            dp1: [r1, { validators: Validators.required, updateOn: this.updateOn }],
            dp2: ['', { validators: Validators.required, updateOn: this.updateOn }],
            dp3: [r2, { validators: [Validators.required, minDateValidator(this.minDate)] }],
            dp4: ['', { validators: Validators.required, updateOn: this.updateOn }],
            start5: [r2.start, { validators: Validators.required, updateOn: this.updateOn }],
            end5: [r2.end, { validators: Validators.required, updateOn: this.updateOn }],
            start6: ['', { validators: Validators.required, updateOn: this.updateOn }],
            end6: ['', { validators: Validators.required, updateOn: this.updateOn }],
        });

        this.propertyChangeService.setPanelConfig(this.panelConfig);

        const propertyChange =
            this.propertyChangeService.propertyChanges.subscribe(
                (properties) => {
                    this.properties = properties;
                }
            );

        this.destroyRef.onDestroy(() => propertyChange.unsubscribe());
    }

    public updateOnChange(e: IChangeCheckboxEventArgs) {
        Object.keys(this.reactiveForm.controls).forEach(name => {
            const control = this.reactiveForm.controls[name];
            const value = control.value;
            const newControl = new UntypedFormControl(
                value,
                { updateOn: e.value, validators: Validators.required }
            );
            this.reactiveForm.setControl(name, newControl);
        });
    }

    public changeLocale(locale: string) {
        this.dateRangePicker.locale = locale;
    }

    public changeWeekStart(value: number) {
        this.dateRangePicker.weekStart = value;
    }
}
const minDateValidator = (minValue: Date): ValidatorFn => (control: AbstractControl): { [key: string]: any } | null => {
    if (control.value && (control.value.start as Date).getTime() < minValue.getTime()) {
        return { minValue: true };
    }

    return null;
};