Skip to content

Commit 0570daa

Browse files
kdinevkdinev
authored
Merge pull request #6438 from IgniteUI/ganastasov/fix-date-range-picker-docs
fix(date-range-picker): clarify two-input structure and picker toggle usage
2 parents 057f05e + 0700654 commit 0570daa

1 file changed

Lines changed: 93 additions & 20 deletions

File tree

‎en/components/date-range-picker.md‎

Lines changed: 93 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -109,16 +109,53 @@ The Angular Date Range Picker component also allows configuring two separate inp
109109
```html
110110
<igx-date-range-picker [(ngModel)]="range">
111111
<igx-date-range-start>
112+
<igx-picker-toggle igxPrefix>
113+
<igx-icon>calendar_today</igx-icon>
114+
</igx-picker-toggle>
115+
<label igxLabel>Start Date</label>
112116
<input igxInput igxDateTimeEditor type="text">
117+
<igx-picker-clear igxSuffix>
118+
<igx-icon>clear</igx-icon>
119+
</igx-picker-clear>
113120
</igx-date-range-start>
114121
<igx-date-range-end>
122+
<igx-picker-toggle igxPrefix>
123+
<igx-icon>calendar_today</igx-icon>
124+
</igx-picker-toggle>
125+
<label igxLabel>End Date</label>
115126
<input igxInput igxDateTimeEditor type="text">
127+
<igx-picker-clear igxSuffix>
128+
<igx-icon>clear</igx-icon>
129+
</igx-picker-clear>
116130
</igx-date-range-end>
117131
</igx-date-range-picker>
118132
```
119133

120-
- Both the [`IgxDateRangeStartComponent`]({environment:angularApiUrl}/classes/igxdaterangestartcomponent.html) and [`IgxDateRangeEndComponent`]({environment:angularApiUrl}/classes/igxdaterangeendcomponent.html) extend the existing [`IgxInputGroupComponent`](input-group.md). For such a configuration to work, defining an [`IgxInput`]({environment:angularApiUrl}/classes/igxinputdirective.html) is required. In addition, all other components and directives available to the [`IgxInputGroupComponent`](input-group.md) can also be used.
121-
- In order to enable date editing for both inputs, you need to decorate them with [`igxDateTimeEditor`](date-time-editor.md) directive.
134+
>[!NOTE]
135+
> In the two-input configuration, place the `input` directly inside `igx-date-range-start` and `igx-date-range-end`.
136+
>
137+
> To open the calendar from an icon, use `igx-picker-toggle` with `igxPrefix` applied directly to it:
138+
>
139+
> ```html
140+
> <igx-picker-toggle igxPrefix>
141+
> <igx-icon>calendar_today</igx-icon>
142+
> </igx-picker-toggle>
143+
> ```
144+
>
145+
> To show a clear action, use `igx-picker-clear` with `igxSuffix` applied directly to it:
146+
>
147+
> ```html
148+
> <igx-picker-clear igxSuffix>
149+
> <igx-icon>clear</igx-icon>
150+
> </igx-picker-clear>
151+
> ```
152+
>
153+
154+
- [`IgxDateRangeStartComponent`]({environment:angularApiUrl}/classes/igxdaterangestartcomponent.html) and [`IgxDateRangeEndComponent`]({environment:angularApiUrl}/classes/igxdaterangeendcomponent.html) support projected content such as labels, hints, picker toggles, and clear buttons.
155+
- Use `igx-picker-toggle` for the calendar action and `igx-picker-clear` for the clear action.
156+
- Apply `igxPrefix` directly to `igx-picker-toggle` and `igxSuffix` directly to `igx-picker-clear`.
157+
- Add the [`IgxInput`]({environment:angularApiUrl}/classes/igxinputdirective.html) directly inside each component.
158+
- To enable date editing, decorate both inputs with the [`igxDateTimeEditor`](date-time-editor.md) directive.
122159
123160
<code-view style="height:600px"
124161
data-demos-base-url="{environment:demosBaseUrl}"
@@ -127,7 +164,7 @@ The Angular Date Range Picker component also allows configuring two separate inp
127164
128165
### Popup modes
129166
130-
By default, when clicked, the [`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) opens its calendar pop-up in `dropdown` mode. Alternatively, the calendar can be opened in `dialog` mode by setting the `Mode` property to `dialog`.
167+
By default, the [`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) opens its calendar pop-up in `dropdown` mode. Alternatively, the calendar can be opened in `dialog` mode by setting the `mode` property to `dialog`.
131168
132169
```html
133170
<igx-date-range-picker [mode]="'dialog'"></igx-date-range-picker>
@@ -140,7 +177,11 @@ By default, when clicked, the [`IgxDateRangePickerComponent`]({environment:angul
140177

141178
<div class="divider--half"></div>
142179

143-
In a default configuration with a single read-only input, the calendar can be opened by clicking anywhere in the input, including the calendar icon. When there are two separate inputs for start and end date, and in dropdown mode, the calendar can only be opened from the calendar icon, since both inputs are editable by default. For two inputs in `dialog` mode, clicking anywhere in the input opens the calendar
180+
In the default single-input configuration, the calendar opens when you click the input or the calendar icon.
181+
182+
When using two separate inputs in `dropdown` mode, the inputs remain editable, so the calendar is typically opened from the picker toggle.
183+
184+
When using two separate inputs in `dialog` mode, clicking either input opens the calendar.
144185

145186
The range value is set when dates are picked from the calendar. You will notice that in dropdown mode, the `Done` button is not available. In dialog mode, a `Cancel` button allows to revert the selection on close.
146187

@@ -195,17 +236,27 @@ Or for two inputs:
195236
```html
196237
<igx-date-range-picker #dateRangePicker [(ngModel)]="range">
197238
<igx-date-range-start>
198-
...
239+
<igx-picker-toggle igxPrefix>
240+
<igx-icon>calendar_today</igx-icon>
241+
</igx-picker-toggle>
199242
<label igxLabel>Start Date</label>
243+
<input igxInput igxDateTimeEditor type="text">
200244
<igx-hint *ngIf="dateRangePicker.invalid">
201245
Please choose start and end date!
202246
</igx-hint>
203-
...
247+
<igx-picker-clear igxSuffix>
248+
<igx-icon>clear</igx-icon>
249+
</igx-picker-clear>
204250
</igx-date-range-start>
205251
<igx-date-range-end>
206-
...
252+
<igx-picker-toggle igxPrefix>
253+
<igx-icon>calendar_today</igx-icon>
254+
</igx-picker-toggle>
207255
<label igxLabel>End Date</label>
208-
...
256+
<input igxInput igxDateTimeEditor type="text">
257+
<igx-picker-clear igxSuffix>
258+
<igx-icon>clear</igx-icon>
259+
</igx-picker-clear>
209260
</igx-date-range-end>
210261
</igx-date-range-picker>
211262
```
@@ -227,20 +278,33 @@ In the default configuration, with a single read-only input, a default calendar
227278

228279
When a Date Range Picker has two separate inputs for start and end dates, it doesn't expose these icons by default. The [`IgxPickerToggleComponent`]({environment:angularApiUrl}/classes/igxpickertogglecomponent.html) and [`IgxPickerClearComponent`]({environment:angularApiUrl}/classes/igxpickerclearcomponent.html) should be manually added as children of the [`IgxDateRangeStartComponent`]({environment:angularApiUrl}/classes/igxdaterangestartcomponent.html) or [`IgxDateRangeEndComponent`]({environment:angularApiUrl}/classes/igxdaterangeendcomponent.html) like so:
229280

281+
>[!NOTE]
282+
> In the two-input configuration:
283+
>
284+
> - use `igx-picker-toggle igxPrefix` for the calendar action
285+
> - use `igx-picker-clear igxSuffix` for the clear action
286+
230287
```html
231288
<igx-date-range-picker>
232289
<igx-date-range-start>
233-
...
234290
<igx-picker-toggle igxPrefix>
235291
<igx-icon>calendar_view_day</igx-icon>
236292
</igx-picker-toggle>
293+
<label igxLabel>Start Date</label>
294+
<input igxInput igxDateTimeEditor type="text">
237295
<igx-picker-clear igxSuffix>
238296
<igx-icon>clear</igx-icon>
239297
</igx-picker-clear>
240-
...
241298
</igx-date-range-start>
242299
<igx-date-range-end>
243-
...
300+
<igx-picker-toggle igxPrefix>
301+
<igx-icon>calendar_view_day</igx-icon>
302+
</igx-picker-toggle>
303+
<label igxLabel>End Date</label>
304+
<input igxInput igxDateTimeEditor type="text">
305+
<igx-picker-clear igxSuffix>
306+
<igx-icon>clear</igx-icon>
307+
</igx-picker-clear>
244308
</igx-date-range-end>
245309
</igx-date-range-picker>
246310
```
@@ -320,15 +384,24 @@ The same configuration can be used when setting two separate inputs. Note that i
320384
```html
321385
<igx-date-range-picker [(ngModel)]="range" required>
322386
<igx-date-range-start>
323-
<label igxLabel>Start Date</label>
324-
<input igxInput igxDateTimeEditor type="text">
325387
<igx-picker-toggle igxPrefix>
326388
<igx-icon>calendar_today</igx-icon>
327389
</igx-picker-toggle>
390+
<label igxLabel>Start Date</label>
391+
<input igxInput igxDateTimeEditor type="text">
392+
<igx-picker-clear igxSuffix>
393+
<igx-icon>clear</igx-icon>
394+
</igx-picker-clear>
328395
</igx-date-range-start>
329396
<igx-date-range-end>
397+
<igx-picker-toggle igxPrefix>
398+
<igx-icon>calendar_today</igx-icon>
399+
</igx-picker-toggle>
330400
<label igxLabel>End Date</label>
331401
<input igxInput igxDateTimeEditor type="text">
402+
<igx-picker-clear igxSuffix>
403+
<igx-icon>clear</igx-icon>
404+
</igx-picker-clear>
332405
</igx-date-range-end>
333406
</igx-date-range-picker>
334407
```
@@ -398,7 +471,7 @@ The `IgxDateRangePickerComponent` is also a validator which means it controls it
398471
</div>
399472
```
400473

401-
### Disabled And Special dates
474+
### Disabled and Special Dates
402475

403476
You also have the ability to set disabled dates in the calendar to narrow the range of dates the user can choose from. To set the disabled dates, you can use the [`disabledDates`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html#disabledDates) property.
404477

@@ -411,10 +484,10 @@ export class DateRangeSampleComponent implements OnInit {
411484

412485
public ngOnInit() {
413486
this.dateRange.disabledDates = [
414-
{
415-
type: DateRangeType.Between,
416-
dateRange: [minDate, maxDate]
417-
}
487+
{
488+
type: DateRangeType.Between,
489+
dateRange: [this.minDate, this.maxDate]
490+
}
418491
] as DateRangeDescriptor[];
419492
}
420493
}
@@ -474,10 +547,10 @@ The header, subheader and title parts of the calendar header can be customized b
474547
<span (click)="format.yearView()">{{ format.year.combined }}</span>
475548
<span (click)="format.monthView()">{{ format.month.combined | titlecase }}</span>
476549
</ng-template>
477-
<ng-template igxCalendarHeaderTitle let-format>
550+
<ng-template igxCalendarHeaderTitle let-format>
478551
<span>My calendar</span>
479552
</ng-template>
480-
</igx-date--range-picker>
553+
</igx-date-range-picker>
481554
```
482555

483556
## Styling

0 commit comments

Comments
 (0)