Merge pull request #7276 from IgniteUI/mvenkov/date-range-add-placeholder

Add placeholder to igxDateRangePicker

Author: Lipata

projects/igniteui-angular/src/lib/date-range-picker/README.md

@@ -108,14 +108,15 @@ With projected inputs:
 ### Inputs
 | Name             | Type               | Description |
 |:-----------------|:-------------------|:------------|
-| mode             | InteractionMode    | Sets whether `IgxDateRangePickerComponent` is in dialog or dropdown mode. Default is `dialog` |
-| monthsViewNumber | number             | Sets the number displayed month views. Default is `2`. |
+| doneButtonText   | string             | Changes the default text of the `done` button. It will show up only in `dialog` mode. Default value is `Done`. |
+| formatter        | function => string | Applies a custom formatter function on the selected or passed date. |
 | hideOutsideDays  | boolean            | Sets whether dates that are not part of the current month will be displayed. Default value is `false`. |
-| weekStart        | number             | Sets the start day of the week. Can be assigned to a numeric value or to `WEEKDAYS` enum value. |
 | locale           | string             | Gets the `locale` of the calendar. Default value is `"en"`. |
-| formatter        | function => string | Applies a custom formatter function on the selected or passed date. |
-| doneButtonText   | string             | Changes the default text of the `done` button. It will show up only in `dialog` mode. Default value is `Done`. |
 | overlaySettings  | OverlaySettings    | Changes the default overlay settings used by the `IgxDateRangePickerComponent`. | 
+| mode             | InteractionMode    | Sets whether `IgxDateRangePickerComponent` is in dialog or dropdown mode. Default is `dialog` |
+| monthsViewNumber | number             | Sets the number displayed month views. Default is `2`. |
+| placeholder      | string             | Sets the `placeholder` for single-input `IgxDateRangePickerComponent`. |
+| weekStart        | number             | Sets the start day of the week. Can be assigned to a numeric value or to `WEEKDAYS` enum value. |
 
 ### Outputs
 | Name             | Type                  | Description |

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts

@@ -262,6 +262,15 @@ describe('IgxDateRangePicker', () => {
             });
 
             describe('Properties & events tests', () => {
+                it('should show date picker with placeholder', () => {
+                    fixture.detectChanges();
+                    expect(singleInputElement.nativeElement.placeholder).toEqual('MM/dd/yyyy - MM/dd/yyyy');
+
+                    const placeholder = 'Some placeholder';
+                    fixture.componentInstance.dateRange.placeholder = placeholder;
+                    fixture.detectChanges();
+                    expect(singleInputElement.nativeElement.placeholder).toEqual(placeholder);
+                });
                 it('should close the calendar with the "Done" button', fakeAsync(() => {
                     fixture.componentInstance.mode = InteractionMode.Dialog;
                     fixture.detectChanges();
@@ -809,4 +818,7 @@ export class DateRangeDefaultCustomLabelComponent extends DateRangeTestComponent
     </igx-date-range-picker>
     `
 })
-export class DateRangeDefaultComponent extends DateRangeTestComponent { }
+export class DateRangeDefaultComponent extends DateRangeTestComponent {
+    @ViewChild(IgxDateRangePickerComponent)
+    public dateRange: IgxDateRangePickerComponent;
+ }

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts

@@ -270,6 +270,16 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
     @Input()
     public disabled: boolean;
 
+    /**
+     * Sets the `placeholder` for single-input `IgxDateRangePickerComponent`.
+     *   @example
+     * ```html
+     * <igx-date-range-picker [placeholder]="'Choose your dates'"></igx-date-range-picker>
+     * ```
+     */
+    @Input()
+    public placeholder = '';
+
     /**
      * Emitted when a range is selected.
      *
@@ -369,6 +379,9 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
             return this.formatter(this.value);
         }
         if (!this.hasProjectedInputs) {
+            if (this.placeholder !== '') {
+                return this.placeholder;
+            }
             // TODO: use displayFormat - see how shortDate, longDate can be defined
             return this.inputFormat
                 ? `${this.inputFormat} - ${this.inputFormat}`