carbon-components-angular
Version:
Next generation components
218 lines (214 loc) • 8.13 kB
TypeScript
/**
*
* carbon-angular v0.0.0 | datepicker.component.d.ts
*
* Copyright 2014, 2024 IBM
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { EventEmitter, ElementRef, OnDestroy, TemplateRef, OnChanges, SimpleChanges, AfterViewChecked, AfterViewInit, OnInit, SimpleChange } from "@angular/core";
import { Options } from "flatpickr/dist/types/options";
import { DatePickerInput } from "carbon-components-angular/datepicker-input";
import { I18n } from "carbon-components-angular/i18n";
import * as i0 from "@angular/core";
/**
* Get started with importing the module:
*
* ```typescript
* import { DatePickerModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-date-picker--single)
*/
export declare class DatePicker implements OnInit, OnDestroy, OnChanges, AfterViewChecked, AfterViewInit {
protected elementRef: ElementRef;
protected i18n: I18n;
private static datePickerCount;
/**
* Select calendar range mode
*/
range: boolean;
/**
* Format of date
*
* For reference: https://flatpickr.js.org/formatting/
*/
dateFormat: string;
/**
* Language of the flatpickr calendar.
*
* For reference of the possible locales:
* https://github.com/flatpickr/flatpickr/blob/master/src/l10n/index.ts
*/
language: string;
label: string | TemplateRef<any>;
helperText: string | TemplateRef<any>;
rangeHelperText: string | TemplateRef<any>;
rangeLabel: string;
placeholder: string;
/**
* Aria label added to datepicker's calendar container.
*/
ariaLabel: string;
/**
* The pattern for the underlying input element
*/
inputPattern: string;
id: string;
set value(v: (Date | string)[]);
get value(): (Date | string)[];
/**
* @deprecated since v5 - Use `cdsLayer` directive instead
* Set to `"light"` to apply the light style
*/
theme: "light" | "dark";
disabled: boolean;
/**
* Set to `true` to display the invalid state.
*/
invalid: boolean;
/**
* Value displayed if datepicker is in an invalid state.
*/
invalidText: string | TemplateRef<any>;
/**
* Set to `true` to show a warning (contents set by warningText)
*/
warn: boolean;
/**
* Sets the warning text
*/
warnText: string | TemplateRef<any>;
size: "sm" | "md" | "lg";
/**
* Set to `true` to display the invalid state for the second datepicker input.
*/
rangeInvalid: boolean;
/**
* Value displayed if the second datepicker input is in an invalid state.
*/
rangeInvalidText: string | TemplateRef<any>;
/**
* Set to `true` to show a warning in the second datepicker input (contents set by rangeWarningText)
*/
rangeWarn: boolean;
/**
* Sets the warning text for the second datepicker input
*/
rangeWarnText: string | TemplateRef<any>;
skeleton: boolean;
plugins: any[];
set flatpickrOptions(options: Partial<Options>);
get flatpickrOptions(): Partial<Options>;
input: DatePickerInput;
rangeInput: DatePickerInput;
valueChange: EventEmitter<any>;
/**
* We are overriding onClose event even if users pass it via flatpickr options
* Emits an event when date picker closes
*/
onClose: EventEmitter<any>;
protected _value: any[];
protected _flatpickrOptions: Partial<Options>;
protected flatpickrBaseOptions: {
mode: string;
dateFormat: string;
plugins: any[];
onOpen: () => void;
onClose: (date: any) => void;
onDayCreate: (_dObj: any, _dStr: any, _fp: any, dayElem: any) => void;
nextArrow: string;
prevArrow: string;
value: (string | Date)[];
};
protected flatpickrInstance: any;
constructor(elementRef: ElementRef, i18n: I18n);
ngOnInit(): void;
ngOnChanges(changes: SimpleChanges): void;
ngAfterViewInit(): void;
ngAfterViewChecked(): void;
onFocus(): void;
onFocusOut(): void;
/**
* Writes a value from the model to the component. Expects the value to be `null` or `(Date | string)[]`
* @param value value received from the model
*/
writeValue(value: (Date | string)[]): void;
/**
* `ControlValueAccessor` method to programmatically disable the DatePicker.
*
* ex: `this.formGroup.get("myDatePicker").disable();`
*
* @param isDisabled `true` to disable the DatePicker
*/
setDisabledState(isDisabled: boolean): void;
registerOnChange(fn: any): void;
registerOnTouched(fn: any): void;
onTouched: () => any;
propagateChange: (_: any) => void;
/**
* Cleans up our flatpickr instance
*/
ngOnDestroy(): void;
/**
* Handles the `valueChange` event from the primary/single input
*/
onValueChange(event: string): void;
/**
* Handles the `valueChange` event from the range input
*/
onRangeValueChange(event: string): void;
/**
* Handles opening the calendar "properly" when the calendar icon is clicked.
*/
openCalendar(datepickerInput: DatePickerInput): void;
protected updateCalendarListeners(): void;
/**
* Handles the initialization of event listeners for the datepicker input and range input fields.
*/
protected addInputListeners(): void;
/**
* Resets the flatpickr instance while keeping the date values (or updating them if newDates is provided)
*
* Used to pick up input changes or locale changes.
*
* @param newDates An optional SimpleChange of date values
*/
protected resetFlatpickrInstance(newDates?: SimpleChange): void;
/**
* Carbon uses a number of specific classnames for parts of the flatpickr - this idempotent method applies them if needed.
*/
protected updateClassNames(): void;
protected updateAttributes(): void;
/**
* Applies the given date value array to both the flatpickr instance and the `input`(s)
* @param dates the date values to apply
*/
protected setDateValues(dates: (Date | string)[]): void;
protected preventCalendarClose: (event: any) => any;
protected doSelect(selectedValue: (Date | string)[]): void;
protected didDateValueChange(currentValue: any, previousValue: any): boolean;
/**
* More advanced checking of the loaded state of flatpickr
*/
protected isFlatpickrLoaded(): boolean;
/**
* Right arrow HTML passed to flatpickr
*/
protected rightArrowHTML(): string;
/**
* Left arrow HTML passed to flatpickr
*/
protected leftArrowHTML(): string;
static ɵfac: i0.ɵɵFactoryDeclaration<DatePicker, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<DatePicker, "cds-date-picker, ibm-date-picker", never, { "range": "range"; "dateFormat": "dateFormat"; "language": "language"; "label": "label"; "helperText": "helperText"; "rangeHelperText": "rangeHelperText"; "rangeLabel": "rangeLabel"; "placeholder": "placeholder"; "ariaLabel": "ariaLabel"; "inputPattern": "inputPattern"; "id": "id"; "value": "value"; "theme": "theme"; "disabled": "disabled"; "invalid": "invalid"; "invalidText": "invalidText"; "warn": "warn"; "warnText": "warnText"; "size": "size"; "rangeInvalid": "rangeInvalid"; "rangeInvalidText": "rangeInvalidText"; "rangeWarn": "rangeWarn"; "rangeWarnText": "rangeWarnText"; "skeleton": "skeleton"; "plugins": "plugins"; "flatpickrOptions": "flatpickrOptions"; }, { "valueChange": "valueChange"; "onClose": "onClose"; }, never, never, false>;
}