From 74ad6b0c0d6bf9833bab92b860dda74136c8bfe7 Mon Sep 17 00:00:00 2001 From: Svetla Boykova Date: Wed, 27 Feb 2019 11:19:14 +0200 Subject: [PATCH] docs(date-picker): Added paragraph for editable date picker #3034 --- en/components/date_picker.md | 108 +++++++++++++++++++++++++++---- jp/components/date_picker.md | 49 ++++++++++++++ kr/components/date_picker.md | 120 +++++++++++++++++++++++++++++------ 3 files changed, 245 insertions(+), 32 deletions(-) diff --git a/en/components/date_picker.md b/en/components/date_picker.md index e9398e01d5..0129e34f46 100644 --- a/en/components/date_picker.md +++ b/en/components/date_picker.md @@ -5,7 +5,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI --- ## Date Picker -

The Ignite UI for Angular Date Picker component displays a month-view calendar or a pop-up calendar that lets users pick a single date. It supports locales and custom date formatting. The component can display a today and cancel buttons.

+

The Ignite UI for Angular Date Picker component displays a month-view calendar that lets users to pick a single date in read-only mode or provides an editable input with dropdown calendar to modify the date in edit mode. It supports locales and custom date formatting. The component can display today and cancel buttons in read-only mode.

### Date Picker Demo @@ -17,11 +17,11 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
-> [!WARNING] +> [!NOTE] > To start using Ignite UI for Angular components in your own projects, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this in the [**installation**](https://www.infragistics.com/products/ignite-ui-angular/getting-started#installation) topic. ### Usage -The [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) allows you to pick a date from a calendar. The picker uses the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) internally as a calendar. To get started with the Ignite UI for Angular Date Picker, let's first import the [**IgxDatePickerModule**]({environment:angularApiUrl}/classes/igxdatepickermodule.html) in our **app.module.ts** file: +By default, the [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) allows you to pick a date from a calendar. The picker uses the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) internally as a calendar. To get started with the Ignite UI for Angular Date Picker, let's first import the [**IgxDatePickerModule**]({environment:angularApiUrl}/classes/igxdatepickermodule.html) in our **app.module.ts** file: ```typescript // app.module.ts @@ -37,9 +37,11 @@ import { IgxDatePickerModule } from 'igniteui-angular'; export class AppModule {} ``` -Then in our template we place the date picker: +To add the date picker in a template, use the following code: ```html + + ``` @@ -53,15 +55,19 @@ The result is as follows:
#### Setting date -We could set a date to our [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) using the [`value`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#value) input. Just add a date: +Set a date to [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) using the [`value`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#value) input. Just add a date: ```typescript +// date-picker-sample.component.ts + public date: Date = new Date(Date.now()); ``` -Then use the [`value`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#value) input in the template: +Then, use the [`value`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#value) input in the template: ```html + + ``` @@ -74,16 +80,24 @@ And there we have it:
-If we want to use a two-way data-binding, we could just use `ngModule` like this: +To create a two-way data-binding, set `ngModel` like this: ```html + + ``` #### Adding buttons -The [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) supports a today button which selects the current day from the calendar. Cancel button could be enabled too. Here is how we can enable the buttons in our template: +The [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) supports 'Today' button, which selects the current day from the calendar. 'Cancel' button could be enabled as well. + +>Note: Configuring the 'Today' and 'Cancel' buttons is applicable only to the read-only mode date picker. + +To enable the buttons in a template, use the [`cancelButtonLabel`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#cancelbuttonlabel) and [`todayButtonLabel`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#todaybuttonlabel) inputs and set the buttons text: ```html + + ``` @@ -97,7 +111,7 @@ Here you can see the buttons:
#### Custom formatting -By default our date will be formatted based on the [`locale`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#locale) we set. We could use our own formatter though. To achieve this add a formatter function: +By default, the display value is formatted based on the specified [`locale`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#locale). You could use your own formatter though. To achieve this, add a formatter function: ```typescript public date: Date = new Date(Date.now()); @@ -110,9 +124,11 @@ public formatter = (date: Date) => { } ``` -And then use the [`formatter`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#formatter) input of the The [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html): +And then use the [`formatter`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#formatter) input of the [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html): ```html + + ``` @@ -125,11 +141,77 @@ Here is the formatted date:
-#### Templating Input Group +#### Editable mode +By default, the date picker is displayed in read-only mode. To change it to editable mode, set the [`mode`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#mode) input to `editable`. + +```html + + + +``` -The Date Picker's input group look can be customized. To do that we need to decorate the nested ng-template inside the date picker with `IgxDatePickerTemplate` directive. ng-template context exposes the following members: `openDialog` method can be used to open the date picker dialog; [`displayData`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#displaydata) property contains the formatted value; [`value`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#value) contains the real value. You could use those by declaring a variables in the ng-template element. +You can further customize the editable date picker, configuring the following date picker inputs: + +| Input | Type | Description | +| ------------- |:-------------:|:-------------:| +| [`format`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#format) | `string` | Configures the date display format. Accepts formats containing valid symbols and combinations that can be applied on Angular Date Pipe. For more information, check [DatePipe](https://angular.io/api/common/DatePipe) documentation. The following pre-defined format options are supported as well - shortDate, mediumDate, longDate and fullDate. | +| [`mask`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#mask)|`string`| Configures the date editor mask. Accepts combinations of the numeric representations of the d, M and y symbols and arbitrary separators - for example dd-MM-y. The editor doesn't accept the literal representation of MMM, MMMM and MMMMM. Valid masks for the day part are: d and dd, for the month part - M and MM and for the year part - y, yy and yyyy.| +| [`isSpinLoop`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#isspinloop) | `boolean` | Configures the continuos spin loop when using the UP and DOWN arrow keys in the editor. If set to false, date part spinning stops when min/max date/month is reached. By default, the spin loop is infinite.| +| [`locale`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#locale) | `string` | When setting the locale property in editable date picker, have in mind that only the en-US locale data comes with Angular. To localize dates in another language, you must import the corresponding locale data. See the [I18n](https://angular.io/guide/i18n#i18n-pipes) guide for more information.| + + +> Note: If both [`formatter`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#formatter) and [`format`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#format) inputs are set, the editable date picker ignores the [`formatter`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#formatter) input. + +The editable date picker provides the following outputs to handle entering of disabled and invalid dates: + +| Output | Arguments | Description | +| ------------- |:-------------:|:-------------:| +| [`onDisabledDate`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#ondisableddate) | `IDatePickerDisabledDateEventArgs` | Fires when the user types/spins a disabled date in the date picker editor. | +| [`onValidationFailed`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#onvalidationfailed) | `IDatePickerValidationFailedEventArgs` | Fires when the user types/spins invalid date in the date picker editor. | + +##### Keyboard Navigation +* To open the date picker drop down: + * SPACE + * ALT + DOWN +* To close the date picker drop down: + * ESC + * ALT + UP +* To increment a date part: + * Focus on a date part + UP +* To decrement a date part: + * Focus on a date part + DOWN + +
+ +
+
+ +
+
+ +#### Templating Input Group -In the following example we modify the default label "Date" add a second icon as suffix. Bellow the input group we're using a label to display the real date picker value: +The Date Picker's input group look can be customized. To do that, we need to decorate the nested ng-template inside the date picker with `IgxDatePickerTemplate` directive. The ng-template context exposes the following members: + +| Members | Description | +| ------------- |:-------------:| +| `openDialog` | Method that can be used to open the date picker dialog | +| [`disabled`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#disabled) | Controls date picker disabled state | +| [`disabledDates`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#disableddates) | Contains disabled dates | +| [`displayData`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#displaydata) | Contains the formatted value when date picker is in read-only mode | +| [`format`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#format) | Contains display format when date picker is in editable mode | +| [`isSpinLoop`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#isspinloop) | Controls continuos spin loop when date picker is in editable mode | +| [`label`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#label) | Contains the input label text | +| [`labelVisibility`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#labelvisibility) | Controls the input label text visibility | +| [`locale`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#locale) | Contains the locale used for formatting and displaying the dates | +| [`mask`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#mask) | Contains the mask when date picker is in editable mode | +| [`mode`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#mode) | Contains the date picker mode | +| [`specialDates`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#specialDates) | Contains special dates | +| [`value`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#value) | Contains the real value | + +You could use those by declaring a variables in the ng-template element. + +In the following example we modify the default label "Date" and add a second icon as suffix. Below the input group, a label is set to display the real date picker value: ```html diff --git a/jp/components/date_picker.md b/jp/components/date_picker.md index 6941630678..c8df4a07f4 100644 --- a/jp/components/date_picker.md +++ b/jp/components/date_picker.md @@ -133,6 +133,55 @@ public formatter = (date: Date) => {
+#### Editable mode +By default, the date picker is displayed in read-only mode. To change it to editable mode, set the [`mode`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#mode) input to `editable`. + +```html + + + +``` + +You can further customize the editable date picker, configuring the following date picker inputs: + +| Input | Type | Description | +| ------------- |:-------------:|:-------------:| +| [`format`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#format) | `string` | Configures the date display format. Accepts formats containing valid symbols and combinations that can be applied on Angular Date Pipe. For more information, check [DatePipe](https://angular.io/api/common/DatePipe) documentation. The following pre-defined format options are supported as well - shortDate, mediumDate, longDate and fullDate. | +| [`mask`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#mask)|`string`| Configures the date editor mask. Accepts combinations of the numeric representations of the d, M and y symbols and arbitrary separators - for example dd-MM-y. The editor doesn't accept the literal representation of MMM, MMMM and MMMMM. Valid masks for the day part are: d and dd, for the month part - M and MM and for the year part - y, yy and yyyy.| +| [`isSpinLoop`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#isspinloop) | `boolean` | Configures the continuos spin loop when using the UP and DOWN arrow keys in the editor. If set to false, date part spinning stops when min/max date/month is reached. By default, the spin loop is infinite.| +| [`locale`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#locale) | `string` | When setting the locale property in editable date picker, have in mind that only the en-US locale data comes with Angular. To localize dates in another language, you must import the corresponding locale data. See the [I18n](https://angular.io/guide/i18n#i18n-pipes) guide for more information.| + + +> Note: If both [`formatter`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#formatter) and [`format`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#format) inputs are set, the editable date picker ignores the [`formatter`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#formatter) input. + +The editable date picker provides the following outputs to handle entering of disabled and invalid dates: + +| Output | Arguments | Description | +| ------------- |:-------------:|:-------------:| +| [`onDisabledDate`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#ondisableddate) | `IDatePickerDisabledDateEventArgs` | Fires when the user types/spins a disabled date in the date picker editor. | +| [`onValidationFailed`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#onvalidationfailed) | `IDatePickerValidationFailedEventArgs` | Fires when the user types/spins invalid date in the date picker editor. | + +##### Keyboard Navigation +* To open the date picker drop down: + * SPACE + * ALT + DOWN +* To close the date picker drop down: + * ESC + * ALT + UP +* To increment a date part: + * Focus on a date part + UP +* To decrement a date part: + * Focus on a date part + DOWN + +
+ +
+
+ +
+
+ + #### 入力グループのテンプレート化 Date Picker の入力グループをカスタマイズできます。デートピッカー内にネストした ng-template を `IgxDatePickerTemplate`ディレクティブでデコレートする必要があります。ng-template コンテキストは、次のメンバーを公開します。`openDialog` メソッドはデートピッカーダイアログに使用できます。[`displayData`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#displaydata)プロパティは書式設定の値を含みます。[`value`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#value) は実際の値を含みます。ng-template 要素で変数を宣言して使用することができます。 diff --git a/kr/components/date_picker.md b/kr/components/date_picker.md index 9d1e333b66..6fb78e507a 100644 --- a/kr/components/date_picker.md +++ b/kr/components/date_picker.md @@ -6,7 +6,7 @@ _language: kr --- ## Date Picker -

The Ignite UI for Angular Date Picker component displays a month-view calendar or a pop-up calendar that lets users pick a single date. It supports locales and custom date formatting. The component can display a today and cancel buttons.

+

The Ignite UI for Angular Date Picker component displays a month-view calendar that lets users to pick a single date in read-only mode or provides an editable input with dropdown calendar to modify the date in edit mode. It supports locales and custom date formatting. The component can display today and cancel buttons in read-only mode.

### Date Picker Demo @@ -14,15 +14,15 @@ _language: kr
- +
-> [!WARNING] +> [!NOTE] > To start using Ignite UI for Angular components in your own projects, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this in the [**installation**](https://www.infragistics.com/products/ignite-ui-angular/getting-started#installation) topic. ### Usage -The [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) allows you to pick a date from a calendar. The picker uses the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) internally as a calendar. To get started with the Ignite UI for Angular Date Picker, let's first import the [**IgxDatePickerModule**]({environment:angularApiUrl}/classes/igxdatepickermodule.html) in our **app.module.ts** file: +By default, the [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) allows you to pick a date from a calendar. The picker uses the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) internally as a calendar. To get started with the Ignite UI for Angular Date Picker, let's first import the [**IgxDatePickerModule**]({environment:angularApiUrl}/classes/igxdatepickermodule.html) in our **app.module.ts** file: ```typescript // app.module.ts @@ -38,9 +38,11 @@ import { IgxDatePickerModule } from 'igniteui-angular'; export class AppModule {} ``` -Then in our template we place the date picker: +To add the date picker in a template, use the following code: ```html + + ``` @@ -49,20 +51,24 @@ The result is as follows:
- +
#### Setting date -We could set a date to our [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) using the [`value`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#value) input. Just add a date: +Set a date to [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) using the [`value`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#value) input. Just add a date: ```typescript +// date-picker-sample.component.ts + public date: Date = new Date(Date.now()); ``` -Then use the [`value`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#value) input in the template: +Then, use the [`value`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#value) input in the template: ```html + + ``` @@ -71,20 +77,28 @@ And there we have it:
- +
-If we want to use a two-way data-binding, we could just use `ngModule` like this: +To create a two-way data-binding, set `ngModel` like this: ```html + + ``` #### Adding buttons -The [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) supports a today button which selects the current day from the calendar. Cancel button could be enabled too. Here is how we can enable the buttons in our template: +The [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) supports 'Today' button, which selects the current day from the calendar. 'Cancel' button could be enabled as well. + +>Note: Configuring the 'Today' and 'Cancel' buttons is applicable only to the read-only mode date picker. + +To enable the buttons in a template, use the [`cancelButtonLabel`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#cancelbuttonlabel) and [`todayButtonLabel`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#todaybuttonlabel) inputs and set the buttons text: ```html + + ``` @@ -93,12 +107,12 @@ Here you can see the buttons:
- +
#### Custom formatting -By default our date will be formatted based on the [`locale`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#locale) we set. We could use our own formatter though. To achieve this add a formatter function: +By default, the display value is formatted based on the specified [`locale`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#locale). You could use your own formatter though. To achieve this, add a formatter function: ```typescript public date: Date = new Date(Date.now()); @@ -111,9 +125,11 @@ public formatter = (date: Date) => { } ``` -And then use the [`formatter`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#formatter) input of the The [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html): +And then use the [`formatter`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#formatter) input of the [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html): ```html + + ``` @@ -122,15 +138,81 @@ Here is the formatted date:
- + +
+
+ +#### Editable mode +By default, the date picker is displayed in read-only mode. To change it to editable mode, set the [`mode`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#mode) input to `editable`. + +```html + + + +``` + +You can further customize the editable date picker, configuring the following date picker inputs: + +| Input | Type | Description | +| ------------- |:-------------:|:-------------:| +| [`format`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#format) | `string` | Configures the date display format. Accepts formats containing valid symbols and combinations that can be applied on Angular Date Pipe. For more information, check [DatePipe](https://angular.io/api/common/DatePipe) documentation. The following pre-defined format options are supported as well - shortDate, mediumDate, longDate and fullDate. | +| [`mask`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#mask)|`string`| Configures the date editor mask. Accepts combinations of the numeric representations of the d, M and y symbols and arbitrary separators - for example dd-MM-y. The editor doesn't accept the literal representation of MMM, MMMM and MMMMM. Valid masks for the day part are: d and dd, for the month part - M and MM and for the year part - y, yy and yyyy.| +| [`isSpinLoop`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#isspinloop) | `boolean` | Configures the continuos spin loop when using the UP and DOWN arrow keys in the editor. If set to false, date part spinning stops when min/max date/month is reached. By default, the spin loop is infinite.| +| [`locale`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#locale) | `string` | When setting the locale property in editable date picker, have in mind that only the en-US locale data comes with Angular. To localize dates in another language, you must import the corresponding locale data. See the [I18n](https://angular.io/guide/i18n#i18n-pipes) guide for more information.| + + +> Note: If both [`formatter`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#formatter) and [`format`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#format) inputs are set, the editable date picker ignores the [`formatter`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#formatter) input. + +The editable date picker provides the following outputs to handle entering of disabled and invalid dates: + +| Output | Arguments | Description | +| ------------- |:-------------:|:-------------:| +| [`onDisabledDate`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#ondisableddate) | `IDatePickerDisabledDateEventArgs` | Fires when the user types/spins a disabled date in the date picker editor. | +| [`onValidationFailed`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#onvalidationfailed) | `IDatePickerValidationFailedEventArgs` | Fires when the user types/spins invalid date in the date picker editor. | + +##### Keyboard Navigation +* To open the date picker drop down: + * SPACE + * ALT + DOWN +* To close the date picker drop down: + * ESC + * ALT + UP +* To increment a date part: + * Focus on a date part + UP +* To decrement a date part: + * Focus on a date part + DOWN + +
+ +
+
+
#### Templating Input Group -The Date Picker's input group look can be customized. To do that we need to decorate the nested ng-template inside the date picker with `IgxDatePickerTemplate` directive. ng-template context exposes the following members: `openDialog` method can be used to open the date picker dialog; [`displayData`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#displaydata) property contains the formatted value; [`value`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#value) contains the real value. You could use those by declaring a variables in the ng-template element. +The Date Picker's input group look can be customized. To do that, we need to decorate the nested ng-template inside the date picker with `IgxDatePickerTemplate` directive. The ng-template context exposes the following members: + +| Members | Description | +| ------------- |:-------------:| +| `openDialog` | Method that can be used to open the date picker dialog | +| [`disabled`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#disabled) | Controls date picker disabled state | +| [`disabledDates`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#disableddates) | Contains disabled dates | +| [`displayData`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#displaydata) | Contains the formatted value when date picker is in read-only mode | +| [`format`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#format) | Contains display format when date picker is in editable mode | +| [`isSpinLoop`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#isspinloop) | Controls continuos spin loop when date picker is in editable mode | +| [`label`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#label) | Contains the input label text | +| [`labelVisibility`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#labelvisibility) | Controls the input label text visibility | +| [`locale`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#locale) | Contains the locale used for formatting and displaying the dates | +| [`mask`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#mask) | Contains the mask when date picker is in editable mode | +| [`mode`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#mode) | Contains the date picker mode | +| [`specialDates`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#specialDates) | Contains special dates | +| [`value`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#value) | Contains the real value | + +You could use those by declaring a variables in the ng-template element. -In the following example we modify the default label "Date" add a second icon as suffix. Bellow the input group we're using a label to display the real date picker value: +In the following example we modify the default label "Date" and add a second icon as suffix. Below the input group, a label is set to display the real date picker value: ```html @@ -158,7 +240,7 @@ Here is the retemplated input group:
- +
@@ -233,7 +315,7 @@ The result is as follows:
- +