Merge pull request #2411 from Akshat55/datepicker-helpertext

feat: Add helper text attribute to datepicker

Author: Akshat55

src/datepicker-input/datepicker-input.component.ts

@@ -67,8 +67,15 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms";
 							class="bx--date-picker__icon bx--date-picker__icon--warn">
 						</svg>
 				</div>
+				<div
+					*ngIf="helperText && !invalid && !warn"
+					class="bx--form__helper-text"
+					[ngClass]="{'bx--form__helper-text--disabled': disabled}">
+					<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
+					<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
+				</div>
 				<div *ngIf="!warn && invalid" class="bx--form-requirement">
-					<ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>
+					<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
 					<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
 				</div>
 				<div *ngIf="!invalid && warn" class="bx--form-requirement">
@@ -127,6 +134,11 @@ export class DatePickerInput {
 	 */
 	@Input() warnText: string | TemplateRef<any>;
 
+	/**
+	 * Sets the optional helper text.
+	 */
+	@Input() helperText: string | TemplateRef<any>;
+
 	@Input() skeleton = false;
 
 	@Input() value = "";
@@ -136,7 +148,7 @@ export class DatePickerInput {
 	// @ts-ignore
 	@ViewChild("input", { static: false }) input: ElementRef;
 
-	constructor(protected elementRef: ElementRef) {}
+	constructor(protected elementRef: ElementRef) { }
 
 	onChange(event) {
 		this.value = event.target.value;
@@ -157,9 +169,9 @@ export class DatePickerInput {
 		this.onTouched = fn;
 	}
 
-	onTouched: () => any = () => {};
+	onTouched: () => any = () => { };
 
-	propagateChange = (_: any) => {};
+	propagateChange = (_: any) => { };
 
 	public isTemplate(value) {
 		return value instanceof TemplateRef;

src/datepicker/datepicker.component.ts

@@ -59,6 +59,7 @@ import { I18n } from "carbon-components-angular/i18n";
 					[warn]="warn"
 					[warnText]="warnText"
 					[skeleton]="skeleton"
+					[helperText]="helperText"
 					(valueChange)="onValueChange($event)"
 					(click)="openCalendar(input)">
 				</ibm-date-picker-input>
@@ -80,6 +81,7 @@ import { I18n } from "carbon-components-angular/i18n";
 					[warn]="rangeWarn"
 					[warnText]="rangeWarnText"
 					[skeleton]="skeleton"
+					[helperText]="rangeHelperText"
 					(valueChange)="onRangeValueChange($event)"
 					(click)="openCalendar(rangeInput)">
 				</ibm-date-picker-input>
@@ -130,8 +132,9 @@ export class DatePicker implements
 	 */
 	@Input() language = "en";
 
-	@Input() label: string  | TemplateRef<any>;
-
+	@Input() label: string | TemplateRef<any>;
+	@Input() helperText: string | TemplateRef<any>;
+	@Input() rangeHelperText: string | TemplateRef<any>;
 	@Input() rangeLabel: string;
 
 	@Input() placeholder = "mm/dd/yyyy";
@@ -220,7 +223,7 @@ export class DatePicker implements
 	get flatpickrOptions() {
 		const plugins = [...this.plugins, carbonFlatpickrMonthSelectPlugin];
 		if (this.range) {
-			plugins.push(rangePlugin({ input: `#${this.id}-rangeInput`, position: "left"}));
+			plugins.push(rangePlugin({ input: `#${this.id}-rangeInput`, position: "left" }));
 		}
 		return Object.assign({}, this._flatpickrOptions, this.flatpickrBaseOptions, {
 			mode: this.range ? "range" : "single",
@@ -407,9 +410,9 @@ export class DatePicker implements
 		this.onTouched = fn;
 	}
 
-	onTouched: () => any = () => {};
+	onTouched: () => any = () => { };
 
-	propagateChange = (_: any) => {};
+	propagateChange = (_: any) => { };
 
 	/**
 	 * Cleans up our flatpickr instance

src/datepicker/datepicker.stories.ts

@@ -194,7 +194,8 @@ storiesOf("Components|Date Picker", module)
 				[warn]="warn"
 				[warnText]="warnText"
 				[dateFormat]="dateFormat"
-				(valueChange)="valueChange($event)">
+				(valueChange)="valueChange($event)"
+				[helperText]="helperText">
 			</ibm-date-picker>
 			<p style="margin-top: 20px;">Without initial value</p>
 			<ibm-date-picker
@@ -209,7 +210,8 @@ storiesOf("Components|Date Picker", module)
 				[warn]="warn"
 				[warnText]="warnText"
 				[dateFormat]="dateFormat"
-				(valueChange)="valueChange($event)">
+				(valueChange)="valueChange($event)"
+				[helperText]="helperText">
 			</ibm-date-picker>
 		`,
 		props: {
@@ -222,6 +224,7 @@ storiesOf("Components|Date Picker", module)
 			invalidText: text("Form validation content", "Invalid date format"),
 			warn: boolean("Show the warning state", false),
 			warnText: text("Text for the warning", "This is a warning"),
+			helperText: text("Helper text", ""),
 			invalid: boolean("Show form validation", false),
 			disabled: boolean("Disabled", false),
 			dateFormat: text("Date format", "m/d/Y"),
@@ -249,7 +252,8 @@ storiesOf("Components|Date Picker", module)
 			[rangeInvalidText]="invalidText"
 			[dateFormat]="dateFormat"
 			[value]="value"
-			(valueChange)="valueChange($event)">
+			(valueChange)="valueChange($event)"
+			[helperText]="helperText">
 		</ibm-date-picker>
 		<p style="margin-top: 20px;">Without initial value</p>
 		<ibm-date-picker
@@ -268,7 +272,8 @@ storiesOf("Components|Date Picker", module)
 			[rangeWarn]="warn"
 			[rangeWarnText]="warnText"
 			[dateFormat]="dateFormat"
-			(valueChange)="valueChange($event)">
+			(valueChange)="valueChange($event)"
+			[helperText]="helperText">
 		</ibm-date-picker>
 		`,
 		props: {
@@ -281,6 +286,7 @@ storiesOf("Components|Date Picker", module)
 			invalidText: text("Form validation content", "Invalid date format"),
 			warn: boolean("Show the warning state", false),
 			warnText: text("Text for the warning", "This is a warning"),
+			helperText: text("Helper text", ""),
 			invalid: boolean("Show form validation", false),
 			disabled: boolean("Disabled", false),
 			dateFormat: text("Date format", "m/d/Y"),