eui documentation
  1. Directives
  2. EclDatePickerDirective

File

packages/ecl/components/ecl-date-picker/ecl-date-picker.directive.ts

Description

Directive that enhances a native input element with an ECL-compliant date picker. Integrates Pikaday with support for localization (i18n), RTL layout, and responsive behavior.

Extends

ECLBaseDirective

Implements

OnInit ControlValueAccessor OnDestroy

Metadata

Providers ECL_DATE_PICKER_VALUE_ACCESSOR
Selector input[eclDatePicker]

Index

Properties
Methods
Inputs
Outputs
HostBindings
HostListeners
Accessors

Constructor

constructor(el: ElementRef, viewContainerRef: ViewContainerRef, translateService: TranslateService, eclRtlService: EclRtlService, renderer: Renderer2, platformId: object)
Parameters :
Name Type Optional
el ElementRef No
viewContainerRef ViewContainerRef No
translateService TranslateService No
eclRtlService EclRtlService No
renderer Renderer2 No
platformId object No

Inputs

format
Type : string
Default value : 'DD-MM-YYYY'

Date format string used to display and parse dates. Follows the format syntax supported by Pikaday.
yearRange
Type : number
Default value : 40

Number of years to show in the year dropdown.
class
Type : string
e2eAttr
Type : any
tabindex
Type : number

Outputs

datePicked
Type : EventEmitter

Emits an event when a date is selected.

HostBindings

attr.disabled
Type : any
Default value : null

Binds the 'disabled' attribute to the host element. Accepts null or an empty string.
attr.type
Type : string
Default value : 'text'

Sets the type attribute of the host input element to 'text'.
class
Type : string

Binds base ECL CSS classes to the host input element.

HostListeners

blur

On blur, checks input value and emits appropriate change.
click

Marks the input as touched when clicked.

Methods

onBlur
onBlur()
Decorators :
@HostListener('blur')

On blur, checks input value and emits appropriate change.

Returns : void
onClick
onClick()
Decorators :
@HostListener('click')

Marks the input as touched when clicked.

Returns : void
registerOnChange
registerOnChange(fn: any)

Registers a callback function that should be called when the control's value changes in the UI. Required by ControlValueAccessor interface.

Parameters :
Name Type Optional Description
fn any No
  • The callback function.
Returns : void
registerOnTouched
registerOnTouched(fn: any)

Registers a callback function that should be called when the control is touched. Required by ControlValueAccessor interface.

Parameters :
Name Type Optional Description
fn any No
  • The callback function.
Returns : void
setDisabledState
setDisabledState(isDisabled: boolean)

Sets the disabled state of the component. Called by Angular forms when the control status changes.

Parameters :
Name Type Optional Description
isDisabled boolean No
  • Boolean indicating whether the input should be disabled.
Returns : void
writeValue
writeValue(value: any)

Writes a new value from the form model into the view or (if needed) DOM property. Required by ControlValueAccessor interface.

Parameters :
Name Type Optional Description
value any No
  • The value to be written into the input.
Returns : void
getCssClasses
getCssClasses(rootClass: string)
Parameters :
Name Type Optional
rootClass string No
Returns : string

Properties

isDisabled
Type : null
Default value : null
Decorators :
@HostBinding('attr.disabled')

Binds the 'disabled' attribute to the host element. Accepts null or an empty string.
type
Type : string
Default value : 'text'
Decorators :
@HostBinding('attr.type')

Sets the type attribute of the host input element to 'text'.

Accessors

cssClasses
getcssClasses()

Binds base ECL CSS classes to the host input element.

Returns : string

results matching ""

    No results matching ""