Merge pull request #583 from youda97/datepicker-options

fix(datepicker): Make flatpickrOptions an input

Author: zvonimirfras

src/datepicker/datepicker.component.ts

@@ -26,13 +26,13 @@ import rangePlugin from "flatpickr/dist/plugins/rangePlugin";
 	template: `
 	<div class="bx--form-item">
 		<ng2-flatpickr
-			[setDate]= "value"
-			[config]= "range ? flatpickrOptionsRange : flatpickrOptions"
+			[setDate]="value"
+			[config]="flatpickrOptions"
 			[hideButton]="true">
 			<div class="bx--form-item">
 				<div
 					data-date-picker
-					[attr.data-date-picker-type]= "range ? 'range' : 'single'"
+					[attr.data-date-picker-type]="(range ? 'range' : 'single')"
 					class="bx--date-picker"
 					[ngClass]="{
 						'bx--date-picker--range' : range,
@@ -43,11 +43,11 @@ import rangePlugin from "flatpickr/dist/plugins/rangePlugin";
 					<div class="bx--date-picker-container">
 						<ibm-date-picker-input
 							[label]= "label"
-							[placeholder]= "placeholder"
-							[pattern]= "pattern"
-							[id]= "id"
-							[type]= "range ? 'range' : 'single'"
-							[hasIcon]= "range ? false : true"
+							[placeholder]="placeholder"
+							[pattern]="pattern"
+							[id]="id"
+							[type]="(range ? 'range' : 'single')"
+							[hasIcon]="(range ? false : true)"
 							[disabled]="disabled"
 							[invalid]="invalid"
 							[invalidText]="invalidText"
@@ -58,12 +58,12 @@ import rangePlugin from "flatpickr/dist/plugins/rangePlugin";
 
 					<div *ngIf="range" class="bx--date-picker-container">
 						<ibm-date-picker-input
-							[label]= "rangeLabel"
-							[placeholder]= "placeholder"
-							[pattern]= "pattern"
-							[id]= "id + '-rangeInput'"
-							[type]= "range ? 'range' : 'single'"
-							[hasIcon]= "range ? true : null"
+							[label]="rangeLabel"
+							[placeholder]="placeholder"
+							[pattern]="pattern"
+							[id]="id + '-rangeInput'"
+							[type]="(range ? 'range' : 'single')"
+							[hasIcon]="(range ? true : null)"
 							[disabled]="disabled"
 							[invalid]="invalid"
 							[invalidText]="invalidText"
@@ -89,7 +89,7 @@ export class DatePicker implements OnDestroy {
 	/**
 	 * Select calendar range mode
 	 */
-	@Input() range: boolean;
+	@Input() range = false;
 
 	/**
 	 * Format of date
@@ -120,20 +120,39 @@ export class DatePicker implements OnDestroy {
 
 	@Input() skeleton = false;
 
+	@Input() plugins = [];
+
+	@Input()
+	set flatpickrOptions(options: FlatpickrOptions) {
+		this._flatpickrOptions = Object.assign({}, this._flatpickrOptions, options);
+	}
+	get flatpickrOptions(): FlatpickrOptions {
+		const plugins = [...this.plugins];
+		if (this.range) {
+			plugins.push(rangePlugin({ input: "#" + this.id + "-rangeInput"}));
+		}
+		return Object.assign({}, this._flatpickrOptions, this.flatpickrBaseOptions, {plugins});
+	}
+
+	set flatpickrOptionsRange (options: FlatpickrOptions) {
+		console.warn("flatpickrOptionsRange is deprecated, use flatpickrOptions and set the range to true instead");
+		this.range = true;
+		options = this.flatpickrOptions;
+	}
+	get flatpickrOptionsRange () {
+		console.warn("flatpickrOptionsRange is deprecated, use flatpickrOptions and set the range to true instead");
+		return this.flatpickrOptions;
+	}
+
 	@Output() valueChange: EventEmitter<any> = new EventEmitter();
 
-	flatpickrOptions: FlatpickrOptions = {
-		dateFormat: this.dateFormat,
-		allowInput: true,
-		onChange: (selectedValue: any) => { this.doSelect(selectedValue); },
-		onOpen: () => { this.updateClassNames(); },
-		value: this.value
+	protected _flatpickrOptions: FlatpickrOptions = {
+		allowInput: true
 	};
 
-	flatpickrOptionsRange: FlatpickrOptions = {
+	protected flatpickrBaseOptions: FlatpickrOptions = {
 		dateFormat: this.dateFormat,
-		"plugins": [rangePlugin({ input: "#" + this.id + "-rangeInput"})],
-		allowInput: true,
+		plugins: this.plugins,
 		onChange: (selectedValue: any) => { this.doSelect(selectedValue); },
 		onOpen: () => { this.updateClassNames(); },
 		value: this.value