Adding Kendo Datepicker

src/app/_mock/testfields.ts

@@ -89,8 +89,8 @@ const transformerFunctions: ValueTransformer = {
 		return transformedValue;
 	}
 };
-const dropDownModifiedInput = new fmd.DropdownModifiedInputField({
-	name: 'dropDownModifiedInput',
+const dropdownModifiedInput = new fmd.DropdownModifiedInputField({
+	name: 'dropdownModifiedInput',
 	value: 'lovely',
 	modifiers,
 	transform: transformerFunctions
@@ -117,10 +117,15 @@ const checkbuttonGroupSA = new fmd.CheckbuttonGroup({
 // ---------------------------------------------------------------------------------------------------------------------
 // Kendo
 
-const timePicker = new fmd.TimePickerField({
-	name: 'timePicker'
+const timepicker = new fmd.TimepickerField({
+	name: 'timepicker'
 });
 
+const datepicker = new fmd.DatepickerField({
+	name: 'datepicker'
+});
+
+
 // ---------------------------------------------------------------------------------------------------------------------
 
 export const formMetaDataObj = {
@@ -133,9 +138,10 @@ export const formMetaDataObj = {
 	disabledTextField,
 	radioFieldHorizontal,
 	checkbutton,
-	dropDownModifiedInput,
+	dropdownModifiedInput,
 	checkbuttonGroup,
-	timePicker
+	timepicker,
+	datepicker
 };
 
 export const standAlone = {
@@ -143,4 +149,4 @@ export const standAlone = {
 	checkbuttonGroupSA
 }
 
-console.log(standAlone);
+console.log(formMetaDataObj);

src/app/dynaform/components/index.ts

@@ -10,5 +10,6 @@ export { DropdownModifiedInputComponent } from './custom/dropdown-modified-input
 export { CheckbuttonComponent } from './custom/checkbutton/checkbutton.component';
 export { CheckbuttonGroupComponent } from './group/checkbutton-group/checkbutton-group.component';
 export { TimepickerComponent } from './kendo/timepicker/timepicker.component';
+export { DatepickerComponent } from './kendo/datepicker/datepicker.component';
 
 

src/app/dynaform/components/kendo/datepicker/datepicker.component.html

@@ -0,0 +1,3 @@
+<kendo-datepicker
+	[placeholder]="placeholder"
+></kendo-datepicker>

src/app/dynaform/components/kendo/datepicker/datepicker.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DatepickerComponent } from './datepicker.component';
+
+describe('DatepickerComponent', () => {
+  let component: DatepickerComponent;
+  let fixture: ComponentFixture<DatepickerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DatepickerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DatepickerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/dynaform/components/kendo/datepicker/datepicker.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { NativeInputComponent } from '../../_abstract/native-input.component';
+
+@Component({
+	selector: 'app-datepicker',
+	templateUrl: './datepicker.component.html',
+	styleUrls: ['./datepicker.component.scss']
+})
+export class DatepickerComponent extends NativeInputComponent {
+
+	exposeMetaInTemplate: string[] = ['placeholder'];
+
+}

src/app/dynaform/components/kendo/timepicker/timepicker.component.html

@@ -1,6 +1,7 @@
 <kendo-timepicker class="form-control form-control-sm"
 	[formControl]="control"
-	[format]="'HH:mm'"
+	[format]="format"
 	[steps]="steps"
+	[placeholder]="placeholder"
 	>
 </kendo-timepicker>

src/app/dynaform/components/kendo/timepicker/timepicker.component.ts

@@ -8,6 +8,6 @@ import { NativeInputComponent } from '../../_abstract/native-input.component';
 })
 export class TimepickerComponent extends NativeInputComponent {
 
-	exposeMetaInTemplate: string[] = ['format', 'steps'];
+	exposeMetaInTemplate: string[] = ['format', 'steps', 'value', 'placeholder'];
 
 }

src/app/dynaform/components/native/text/text.component.html

@@ -2,4 +2,5 @@
 	[formControl]="control"
 	[placeholder]="placeholder"
 	class="form-control form-control-sm"
->
+>
+

src/app/dynaform/directives/dynafield.directive.ts

@@ -63,22 +63,23 @@ export class DynafieldDirective extends NgControl implements OnInit {
 			this.component = this.container.createComponent(component);
 			const instance = this.component.instance;
 			const el = this.component.location.nativeElement;
+			el.classList.add(type.toLowerCase().replace('component', ''));
 
-			// Set its FormControl and metadata
+			// Check whether it's disabled, then set its FormControl and metadata
 			if (isDisabled) {
 				this.control.reset({ value: this.control.value, disabled: true });
 			}
 			instance.control = this.control;
 			instance.meta = this.meta;
 
-			// Add id and classes (if specified)
-			if (cssClass) {
-				const classesToAdd = Array.isArray(cssClass) ? cssClass : [cssClass];
-				el.classList.add(...classesToAdd);
-			}
+			// Add id and classes (as specified)
 			if (cssId) {
 				el.id = cssId;
 			}
+			if (cssClass) {
+				const classesToAdd = Array.isArray(cssClass) ? cssClass : [cssClass];
+				el.classList.add(type.toLowerCase(), ...classesToAdd);
+			}
 
 			// Connect custom components
 			if (instance.propagateChange) {

src/app/dynaform/dynaform.component.html

@@ -6,7 +6,7 @@
 <!-- Default template for form field
      used when a TemplateRef is NOT supplied to component -->
 <ng-template #default let-control="control" let-meta="meta">
-	<div class="row">
+	<div class="row" [ngClass]="getRowClass(meta.type)">
 		<div class="col-sm-4">
 			<label [for]="meta.name">{{ meta.label }}</label>
 		</div>

src/app/dynaform/dynaform.component.scss

@@ -0,0 +1,3 @@
+.timepicker {
+	max-width: 300px;
+}

src/app/dynaform/dynaform.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, ViewChild, TemplateRef, Optional, OnInit } from '@angular/core';
+import { Component, Input, TemplateRef, Optional, OnInit } from '@angular/core';
 import { FormGroup, FormGroupName, AbstractControl, ControlContainer } from '@angular/forms';
 
 export interface DynarowContext {
@@ -48,8 +48,6 @@ export class DynaformComponent implements OnInit {
 	formMetaData: any; // TODO: Tighten up type
 	controlNames: string[];
 
-	ctx = {ccc: 123};
-
 	constructor(
 		@Optional() private cc: ControlContainer
 	) {}
@@ -62,6 +60,9 @@ export class DynaformComponent implements OnInit {
 			throw new Error('Dynaform Component initialised without [formGroup] or formGroupName');
 		}
 		this.controlNames = Object.keys(this.formGroup.controls);
+		// this.controlNames = Object.values(this.formMetaData).map((metaFoG: StringMap) => metaFoG.name);
+		// console.log(this.controlNames);
+		// console.log(this.formGroup);
 	}
 
 	getTemplateContext(controlName: string): DynarowContext {
@@ -71,4 +72,8 @@ export class DynaformComponent implements OnInit {
 		};
 	}
 
+	getRowClass(inputType: string): string {
+		return `row-${inputType.toLowerCase().replace('component', '')}`;
+	}
+
 }

src/app/dynaform/models/index.ts

@@ -169,13 +169,20 @@ class CheckbuttonGroup {
 // ---------------------------------------------------------------------------------------------------------------------
 // Kendo Form Component Models
 
-class TimePickerField extends SimpleField {
+class TimepickerField extends SimpleField {
 	type = 'Timepicker';
 	value: Date = new Date();
-	format = 'HH:mm';
+	format = 'hh:mm a';
 	steps = { hour: 1, minute: 15 };
 }
 
+class DatepickerField extends SimpleField {
+	type = 'Datepicker';
+	value: Date = new Date();
+}
+
+
+
 // ---------------------------------------------------------------------------------------------------------------------
 // ---------------------------------------------------------------------------------------------------------------------
 // ---------------------------------------------------------------------------------------------------------------------
@@ -185,10 +192,9 @@ export {
 	TextField, TextareaField, PasswordField, SelectField, RadioField,
 	CheckbuttonField, DropdownModifiedInputField,
 	CheckbuttonGroup,
-	TimePickerField
+	TimepickerField, DatepickerField
 };
 
-
 /* *********************************************************************************************************************
  * Usage
  * Just ideas here for reference at the moment

src/styles.scss

@@ -44,4 +44,12 @@ div.col-sm-8 {
 		border-width: 2px;
 		width: 50%;
 	}
-}
+}
+
+// ---------------------------------------------------------------------------------------------------------------------
+// Input styles
+
+.timepicker {
+	display: inline-block;
+	max-width: 140px;
+}