Common interface for Components with show and collapse functionality

Constructors

Section titled "Constructors"

PickerBaseDirective 

new PickerBaseDirective(): PickerBaseDirective

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:343

Returns PickerBaseDirective

Properties

Section titled "Properties"

closed

Section titled "closed"

Emitted after the calendar has closed.

 
closed: EventEmitter<IBaseEventArgs>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:278

Example

<igx-date-picker (closed)="handleClosed($event)"></igx-date-picker>

closing

Section titled "closing"

Emitted when the calendar has started closing, cancelable.

 
closing: EventEmitter<IBaseCancelableBrowserEventArgs>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:267

Example

<igx-date-picker (closing)="handleClosing($event)"></igx-date-picker>

disabled

Section titled "disabled"

Enables or disables the picker.

 
disabled: boolean = false

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:144

Example

<igx-date-picker [disabled]="'true'"></igx-date-picker>

element

Section titled "element" 
element: ElementRef<any>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:31

headerOrientation

Section titled "headerOrientation"

Gets/Sets the orientation of the date picker header.

 
headerOrientation: PickerHeaderOrientation = PickerHeaderOrientation.Horizontal

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:111

Example

<igx-date-picker headerOrientation="vertical"></igx-date-picker>

hideHeader

Section titled "hideHeader"

Gets/Sets whether the header is hidden in dialog mode.

 
hideHeader: boolean = false

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:122

Example

<igx-date-picker mode="dialog" [hideHeader]="true"></igx-date-picker>

mode

Section titled "mode"

Can be dropdown with editable input field or dialog with readonly input field.

 
mode: PickerInteractionMode = PickerInteractionMode.DropDown

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:100

Remarks

Default mode is dropdown

Example

<igx-date-picker mode="dialog"></igx-date-picker>

opened

Section titled "opened"

Emitted after the calendar has opened.

 
opened: EventEmitter<IBaseEventArgs>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:256

Example

<igx-date-picker (opened)="handleOpened($event)"></igx-date-picker>

opening

Section titled "opening"

Emitted when the calendar has started opening, cancelable.

 
opening: EventEmitter<IBaseCancelableBrowserEventArgs>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:245

Example

<igx-date-picker (opening)="handleOpening($event)"></igx-date-picker>

outlet

Section titled "outlet"

The container used for the pop-up element.

 
outlet: IgxOverlayOutletDirective | ElementRef<any>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:204

Example

<div igxOverlayOutlet #outlet="overlay-outlet"></div>
<!-- ... -->
<igx-date-picker [outlet]="outlet"></igx-date-picker>
<!-- ... -->

overlaySettings

Section titled "overlaySettings"

Overlay settings used to display the pop-up element.

 
overlaySettings: OverlaySettings

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:133

Example

<igx-date-picker [overlaySettings]="customOverlaySettings"></igx-date-picker>

placeholder

Section titled "placeholder"

Sets the placeholder of the picker's input.

 
placeholder: string = ''

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:86

Example

<igx-date-picker [placeholder]="'Choose your date'"></igx-date-picker>

tabIndex

Section titled "tabIndex"

Gets/Sets the default template editor's tabindex.

 
tabIndex: string | number

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:234

Example

<igx-date-picker [tabIndex]="1"></igx-date-picker>

valueChange

Section titled "valueChange" 
valueChange: EventEmitter<any>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:341

Accessors

Section titled "Accessors"

collapsed

Section titled "collapsed"

Gets the picker's pop-up state.

 
get collapsed(): boolean

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:316

Example

const state = this.picker.collapsed;

Returns boolean

displayFormat

Section titled "displayFormat" 
get displayFormat(): string

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:73

Returns string

The format used to display the picker's value when it's not being edited.

 
set displayFormat(value: string): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:69

Example

<igx-date-picker displayFormat="EE/M/yy"></igx-date-picker>

Parameters

  • value: string

Returns void

inputFormat

Section titled "inputFormat" 
get inputFormat(): string

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:52

Returns string

The editor's input mask.

 
set inputFormat(value: string): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:48

Example

<igx-date-picker inputFormat="dd/MM/yy"></igx-date-picker>

Parameters

  • value: string

Returns void

locale

Section titled "locale"

Gets the locale of the date-picker. If not set, defaults to applciation's locale..

 
get locale(): string

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:157

Returns string

Sets the locale of the date-picker. Expects a valid BCP 47 language tag.

 
set locale(value: string): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:165

Parameters

  • value: string

Returns void

type

Section titled "type"

Determines how the picker's input will be styled.

 
set type(val: IgxInputGroupType): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:218

Example

<igx-date-picker [type]="'line'"></igx-date-picker>

Parameters

Returns void

weekStart

Section titled "weekStart"

Gets the start day of the week. Can return a numeric or an enum representation of the week day. If not set, defaults to the first day of the week for the application locale.

 
get weekStart(): number

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:176

Returns number

Sets the start day of the week. Can be assigned to a numeric value or to WEEKDAYS enum value.

 
set weekStart(value: number): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:184

Parameters

  • value: number

Returns void

Methods

Section titled "Methods"

clear

Section titled "clear" 
clear(): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:406

Returns void

close

Section titled "close" 
close(): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:405

Returns void

getEditElement

Section titled "getEditElement"

Return the focusable native element

 
getEditElement(): HTMLInputElement

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:407

Returns HTMLInputElement

open

Section titled "open" 
open(settings: OverlaySettings): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:403

Parameters

Returns void

select

Section titled "select" 
select(value: string | Date | DateRange): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:402

Parameters

Returns void

toggle

Section titled "toggle" 
toggle(settings: OverlaySettings): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:404

Parameters

Returns void