Defines the start input for a date range picker
Igx Module
IgxDateRangePickerModule
Igx Theme
igx-input-group-theme, igx-calendar-theme, igx-date-range-picker-theme
Igx Keywords
date, range, date range, date picker
Igx Group
scheduling

Remarks

[object Object]

Example

<igx-date-range-picker mode="dropdown">
     <igx-date-range-start>
         <input igxInput igxDateTimeEditor type="text">
     </igx-date-range-start>
     ...
</igx-date-range-picker>

Constructors

Section titled "Constructors"

IgxDateRangeStartComponent 

new IgxDateRangeStartComponent(): IgxDateRangeStartComponent

Defined in projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:232

Returns IgxDateRangeStartComponent

Properties

Section titled "Properties"

dateTimeEditor

Section titled "dateTimeEditor"

Inherited from: IgxDateRangeInputsBaseComponent 

dateTimeEditor: IgxDateTimeEditorDirective

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker-inputs.common.ts:56

defaultClass

Section titled "defaultClass"

Inherited from: IgxDateRangeInputsBaseComponent

Property that enables/disables the auto-generated class of the input group. By default applied the class is applied.

@ViewChild("MyInputGroup")
 public inputGroup: IgxInputGroupComponent;
 ngAfterViewInit(){
 this.inputGroup.defaultClass = false;

}

 
defaultClass: boolean = true

Defined in projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:77

element

Section titled "element"

Inherited from: IgxDateRangeInputsBaseComponent 

element: ElementRef<HTMLElement>

Defined in projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:42

inputDirective

Section titled "inputDirective"

Inherited from: IgxDateRangeInputsBaseComponent 

inputDirective: IgxInputDirective

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker-inputs.common.ts:59

suppressInputAutofocus

Section titled "suppressInputAutofocus"

Inherited from: IgxDateRangeInputsBaseComponent

Prevents automatically focusing the input when clicking on other elements in the input group (e.g. prefix or suffix).

 
suppressInputAutofocus: boolean = false

Defined in projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:113

Remarks

Automatic focus causes software keyboard to show on mobile devices.

Example

<igx-input-group [suppressInputAutofocus]="true"></igx-input-group>

Accessors

Section titled "Accessors"

hasBorder

Section titled "hasBorder"

Inherited from: IgxDateRangeInputsBaseComponent

Returns whether the input group has border.

@ViewChild("MyInputGroup")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
   let inputBorder = this.inputGroup.hasBorder;
}
get hasBorder(): boolean

Defined in projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:317

Returns boolean

hasHints

Section titled "hasHints"

Inherited from: IgxDateRangeInputsBaseComponent

Returns whether the input group has hints.

@ViewChild("MyInputGroup")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
   let inputHints = this.inputGroup.hasHints;
}
get hasHints(): boolean

Defined in projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:281

Returns boolean

isTypeBootstrap

Section titled "isTypeBootstrap"

Inherited from: IgxDateRangeInputsBaseComponent

Returns true if the input group theme is Bootstrap.

@ViewChild("MyInputGroup1")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
   let isTypeBootstrap = this.inputGroup.isTypeBootstrap;
}
get isTypeBootstrap(): boolean

Defined in projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:434

Returns boolean

isTypeBorder

Section titled "isTypeBorder"

Inherited from: IgxDateRangeInputsBaseComponent

Returns whether the input group type is border.

@ViewChild("MyInputGroup1")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
   let isTypeBorder = this.inputGroup.isTypeBorder;
}
get isTypeBorder(): boolean

Defined in projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:404

Returns boolean

isTypeBox

Section titled "isTypeBox"

Inherited from: IgxDateRangeInputsBaseComponent

Returns whether the input group type is box.

@ViewChild("MyInputGroup1")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
   let isTypeBox = this.inputGroup.isTypeBox;
}
get isTypeBox(): boolean

Defined in projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:349

Returns boolean

isTypeFluent

Section titled "isTypeFluent"

Inherited from: IgxDateRangeInputsBaseComponent

Returns true if the input group theme is Fluent.

@ViewChild("MyInputGroup1")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
   let isTypeFluent = this.inputGroup.isTypeFluent;
}
get isTypeFluent(): boolean

Defined in projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:419

Returns boolean

isTypeIndigo

Section titled "isTypeIndigo"

Inherited from: IgxDateRangeInputsBaseComponent

Returns true if the input group theme is Indigo.

@ViewChild("MyInputGroup1")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
   let isTypeIndigo = this.inputGroup.isTypeIndigo;
}
get isTypeIndigo(): boolean

Defined in projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:449

Returns boolean

isTypeLine

Section titled "isTypeLine"

Inherited from: IgxDateRangeInputsBaseComponent

Returns whether the input group type is line.

@ViewChild("MyInputGroup1")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
   let isTypeLine = this.inputGroup.isTypeLine;
}
get isTypeLine(): boolean

Defined in projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:334

Returns boolean

isTypeSearch

Section titled "isTypeSearch"

Inherited from: IgxDateRangeInputsBaseComponent

Returns whether the input group type is search.

@ViewChild("MyInputGroup1")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
   let isTypeSearch = this.inputGroup.isTypeSearch;
}
get isTypeSearch(): boolean

Defined in projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:464

Returns boolean

resourceStrings

Section titled "resourceStrings"

Inherited from: IgxDateRangeInputsBaseComponent

Sets the resource strings. By default it uses EN resources.

 
set resourceStrings(value: IInputResourceStrings): void

Defined in projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:54

Parameters

Returns void

theme

Section titled "theme"

Inherited from: IgxDateRangeInputsBaseComponent

Returns the theme of the input. The returned value is of type input group type.

@ViewChild("MyInputGroup")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit() {
 let inputTheme = this.inputGroup.theme;
}
get theme(): IgxTheme

Defined in projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:228

Returns IgxTheme

Sets the theme of the input. Allowed values of type input group theme.

@ViewChild("MyInputGroup")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit() {
 let inputTheme = 'fluent';
}
set theme(value: IgxTheme): void

Defined in projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:214

Parameters

Returns void

type

Section titled "type"

Inherited from: IgxDateRangeInputsBaseComponent

Returns the type of the input group. How the input is styled. The default is box.

@ViewChild("MyInputGroup")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
   let inputType = this.inputGroup.type;
}
get type(): IgxInputGroupType

Defined in projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:199

Returns IgxInputGroupType

Sets how the input will be styled. Allowed values of type input group type.

<igx-input-group [type]="'search'">
set type(value: IgxInputGroupType): void

Defined in projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:184

Parameters

Returns void