ng-material-date-range-picker
Version:
This library provides the date range selection with two views.
126 lines (125 loc) • 6.25 kB
TypeScript
/**
* @(#)ng-date-picker.component.ts Sept 05, 2023
*
* @author Aakash Kumar
*/
import { AfterViewInit, EventEmitter, OnInit, Signal } from '@angular/core';
import { DateRange } from '@angular/material/datepicker';
import { SelectedDateEvent } from '../public-api';
import { ISelectDateOption } from './model/select-date-option.model';
import * as i0 from "@angular/core";
export declare class NgDatePickerComponent implements OnInit, AfterViewInit {
isDateOptionList: boolean;
isCustomRange: boolean;
inputLabel: string;
staticOptionId: string;
dynamicOptionId: string;
calendarId: string;
enableDefaultOptions: boolean;
selectedDates: DateRange<Date> | null;
dateFormat: string;
isShowStaticDefaultOptions: boolean;
hideDefaultOptions: boolean;
cdkConnectedOverlayOffsetX: number;
cdkConnectedOverlayOffsetY: number;
listCdkConnectedOverlayOffsetY: number;
listCdkConnectedOverlayOffsetX: number;
selectedOptionIndex: number;
displaySelectedLabel: boolean;
cdkConnectedOverlayPush: boolean;
cdkConnectedOverlayPositions: never[];
minDate: Date;
maxDate: Date;
onDateSelectionChanged: EventEmitter<SelectedDateEvent>;
dateListOptions: EventEmitter<ISelectDateOption[]>;
private cdref;
private el;
private _dateOptions;
visibleOptions: Signal<ISelectDateOption[]>;
constructor();
set dateDropDownOptions(defaultDateList: ISelectDateOption[]);
get dateDropDownOptions(): ISelectDateOption[];
ngOnInit(): void;
ngAfterViewInit(): void;
/**
* Toggles the visibility of the default date option list.
* If the custom option is selected, toggles the custom date range view instead.
*
* @param event Optional MouseEvent triggering the toggle.
*/
toggleDateOptionSelectionList(event?: MouseEvent): void;
/**
* Updates the custom date range selection from the input.
*
* @param input The HTML input element associated with the date picker.
* @param selectedDates The selected date range.
*/
updateCustomRange(input: HTMLInputElement, selectedDates: DateRange<Date> | null): void;
/**
* Updates the selection when a specific date option is clicked.
*
* @param option The selected date option.
* @param input The HTML input element to update with selected dates.
*/
updateSelection(option: ISelectDateOption, input: HTMLInputElement): void;
/**
* Toggles the custom date range selection view visibility.
*/
toggleCustomDateRangeView(): void;
/**
* Clears the currently selected dates and resets all related properties.
*
* @param event The MouseEvent triggering the clear action.
*/
clearSelection(event: MouseEvent): void;
/**
* Clears the input field value for the date picker.
*/
private clearDateInput;
/**
* Updates selected dates based on a selected option and input element.
*
* @param option The selected date option.
* @param input The HTML input element to update.
*/
private updateDateOnOptionSelect;
/**
* Calculates and updates the start and end dates based on the selected option.
*
* @param option The selected date option.
* @param input The HTML input element to update.
*/
private updateDateWithSelectedOption;
/**
* Updates the date range and input display.
*
* @param input The HTML input element.
* @param start Start date of the range.
* @param end End date of the range.
* @param opt Optional selected date option.
*/
private updateSelectedDates;
/**
* Updates the input and internal state with default dates on initialization.
*/
private updateDefaultDatesValues;
/**
* Updates the input and selected dates based on a selected option from the list.
*
* @param selectedOption The selected date option.
* @param input The HTML input element to update.
*/
private updatedFromListValueSelection;
/**
* Checks whether default initialization of options is required.
*
* @returns True if default options need to be initialized, otherwise false.
*/
private isDefaultInitRequired;
/**
* Initializes the default date options with the selected index.
*/
private initDefaultOptions;
static ɵfac: i0.ɵɵFactoryDeclaration<NgDatePickerComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<NgDatePickerComponent, "ng-date-range-picker", never, { "inputLabel": { "alias": "inputLabel"; "required": false; }; "staticOptionId": { "alias": "staticOptionId"; "required": false; }; "dynamicOptionId": { "alias": "dynamicOptionId"; "required": false; }; "calendarId": { "alias": "calendarId"; "required": false; }; "enableDefaultOptions": { "alias": "enableDefaultOptions"; "required": false; }; "selectedDates": { "alias": "selectedDates"; "required": false; }; "dateFormat": { "alias": "dateFormat"; "required": false; }; "isShowStaticDefaultOptions": { "alias": "isShowStaticDefaultOptions"; "required": false; }; "hideDefaultOptions": { "alias": "hideDefaultOptions"; "required": false; }; "cdkConnectedOverlayOffsetX": { "alias": "cdkConnectedOverlayOffsetX"; "required": false; }; "cdkConnectedOverlayOffsetY": { "alias": "cdkConnectedOverlayOffsetY"; "required": false; }; "listCdkConnectedOverlayOffsetY": { "alias": "listCdkConnectedOverlayOffsetY"; "required": false; }; "listCdkConnectedOverlayOffsetX": { "alias": "listCdkConnectedOverlayOffsetX"; "required": false; }; "selectedOptionIndex": { "alias": "selectedOptionIndex"; "required": false; }; "displaySelectedLabel": { "alias": "displaySelectedLabel"; "required": false; }; "cdkConnectedOverlayPush": { "alias": "cdkConnectedOverlayPush"; "required": false; }; "cdkConnectedOverlayPositions": { "alias": "cdkConnectedOverlayPositions"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateDropDownOptions": { "alias": "dateDropDownOptions"; "required": false; }; }, { "onDateSelectionChanged": "onDateSelectionChanged"; "dateListOptions": "dateListOptions"; }, never, never, false, never>;
}