Skip to content

Commit 0b67357

Browse files
LipataLipata
authored
Merge pull request #7235 from IgniteUI/iganchev/date-time-readme-changelog
Add date time readme and update changelog
2 parents ae3ad37 + 8fbaa7f commit 0b67357

File tree

2 files changed

+137
-0
lines changed

2 files changed

+137
-0
lines changed

‎CHANGELOG.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,24 @@ All notable changes for each version of this project will be documented in this
9797
- New `igxDragIgnore` directive that allows children of the `igxDrag` element to be interactable and receive mouse events. Dragging cannot be performed from those elements that are ignored.
9898
- New `dragDirection` input that can specify only one direction of dragging or both.
9999

100+
- `IgxDateTimeEditor` directive added.
101+
- Allows the user to set and edit `date` and `time` in a chosen input element.
102+
- Can edit `date` or `time` portion, using an editable masked input.
103+
- Additionally, can specify a desired `display` and `input` `format`, as well as `min` and `max` values.
104+
105+
- A basic configuration scenario setting a Date object as a `value`:
106+
```html
107+
<igx-input-group>
108+
<input type="text" igxInput igxDateTimeEditor [value]="date"/>
109+
</igx-input-group>
110+
```
111+
- Two-way data-binding via an ngModel:
112+
```html
113+
<igx-input-group>
114+
<input type="text" igxInput igxDateTimeEditor [(ngModel)]="date"/>
115+
</igx-input-group>
116+
```
117+
100118
### RTL Support
101119
- `igxSlider` have full right-to-left (RTL) support.
102120

‎projects/igniteui-angular/src/lib/directives/date-time-editor/README.md‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
# igxDateTimeEditor Directive
2+
3+
The `igxDateTimeEditor` allows the user to set and edit date and time in a chosen input element. The user can edit date or time portion, using an editable masked input. Additionally, can specify a desired display and input format, as well as min and max values to help validation.
4+
5+
## Usage
6+
Import the `IgxDateTimeEditorModule` in the module that you want to use it in:
7+
8+
```typescript
9+
...
10+
import { IgxDateTimeEditorModule } from 'igniteui-angular';
11+
12+
@NgModule({
13+
...
14+
imports: [..., IgxDateTimeEditorModule ],
15+
...
16+
})
17+
export class AppModule {}
18+
```
19+
20+
To use an input as a date time editor, set an `igxDateTimeEditor` directive and a valid date object as value. In order to have complete editor look and feel, wrap the input in an `input group`. This will allow you to not only take advantage of the following directives `igxInput`, `igxLabel`, `igx-prefix`, `igx-suffix`, `igx-hint`, but cover common scenarios when dealing with form inputs as well.
21+
22+
### Binding
23+
A basic configuration scenario setting a Date object as a `value`:
24+
```typescript
25+
public date = new Date();
26+
```
27+
28+
```html
29+
<igx-input-group>
30+
<input type="text" igxInput igxDateTimeEditor [value]="date"/>
31+
</igx-input-group>
32+
```
33+
34+
To create a two-way data-binding, set an ngModel:
35+
```html
36+
<igx-input-group>
37+
<input type="text" igxInput igxDateTimeEditor [(ngModel)]="date"/>
38+
</igx-input-group>
39+
```
40+
41+
### Features
42+
#### Date Format
43+
To set specific display and input format.
44+
```html
45+
<igx-input-group>
46+
<input type="text" igxInput [displayFormat]="'shortDate'" [igxDateTimeEditor]="'dd/MM/yyyy'" [(ngModel)]="date"/>
47+
</igx-input-group>
48+
```
49+
50+
#### Min and Max Value
51+
You can specify `minValue` and `maxValue` properties to restrict input and control the validity of the ngModel.
52+
```typescript
53+
public minDate = new Date(2020, 1, 15);
54+
public maxDate = new Date(2020, 12, 1);
55+
```
56+
```html
57+
<igx-input-group>
58+
<input type="text" igxInput igxDateTimeEditor [minValue]="minDate" [maxValue]="maxDate" [(ngModel)]="date"/>
59+
</igx-input-group>
60+
61+
```
62+
63+
#### Increment and Decrement
64+
`igxDateTimeEditor` directive exposes public `increment` and `decrement` methods, that increment or decrement a specific `DatePart` of the currently set date and time.
65+
```typescript
66+
public date = new Date();
67+
public datePart: typeof DatePart = DatePart;
68+
```
69+
```html
70+
<igx-input-group>
71+
<input igxInput #timeEditor="igxDateTimeEditor" type="text" [igxDateTimeEditor]="'HH:mm tt'" [(ngModel)]="date">
72+
<igx-suffix>
73+
<igx-icon (click)="timeEditor.increment(datePart.Minutes)">keyboard_arrow_up</igx-icon>
74+
<igx-icon (click)="timeEditor.decrement(datePart.Minutes)">keyboard_arrow_down</igx-icon>
75+
</igx-suffix>
76+
</igx-input-group>
77+
```
78+
79+
#### Keyboard Navigation
80+
`igxDateTimeEditor` directive has intuitive keyboard navigation that makes it easy to jump through different `DateParts`, increment, decrement, etc. without having to touch the mouse.
81+
82+
| Key combination | Effect |
83+
|--|--|
84+
| `Left Arrow` | Move one character to the left. |
85+
| `Right Arrow` | Move one character to the left. |
86+
| `Home` | Move to the beginning. |
87+
| `End` | Move to the end. |
88+
| `CTRL/COMMAND` + `Left Arrow` | Move to the beginning of the date/time section - current one or left one. |
89+
| `CTRL/COMMAND` + `Right Arrow` | Move to the end of the date/time section - current on or right one. |
90+
| `Down Arrow` | On a date/time section should decrement that part of the edited date. |
91+
| `Up Arrow` | On a date/time section should increment that part of the edited date. |
92+
| `CTRL/COMMAND` + `;` | Sets the current date and time as the value of the editor. |
93+
94+
### API
95+
| Name | Type | Description |
96+
|:-----|:----|:------------|
97+
| `value` | Date | The value of the editor. |
98+
| `displayFormat` | string | The display value of the editor. |
99+
| `inputFormat` | string | The format that the editor will use to display the date/time. |
100+
| `minValue` | string / Date | Sets the minimum value required for the editor to remain valid. |
101+
| `maxValue` | string / Date | Sets the maximum value required for the editor to remain valid. |
102+
| `isSpinLoop` | boolean | Loop over the currently spun segment. |
103+
| `promptChar` | string | Defines the empty characters in the mask. |
104+
| `locale` | string | Locale settings used in displayFormat. |
105+
106+
#### Methods
107+
| Name | Type | Description |
108+
|:-----|:----|:------------|
109+
| `clear` | void | Clears the input element of user input. |
110+
| `increment` | void | Increments default OR specified time portion. |
111+
| `decrement` | void | Decrements default OR specified time portion. |
112+
113+
#### Events
114+
| Name | Type | Description |
115+
|:-----|:----|:------------|
116+
| `valueChanged` | custom | Fired when the editor's value has changed. |
117+
| `validationFailed` | custom | Fired when the editor is not within a specified range. Can revert back to a previously valid state by changing the `newValue` property of the `args` parameter. |
118+
119+

0 commit comments

Comments
 (0)