Adding Kendo TimePicker field

src/app/_mock/testfields.ts

@@ -117,6 +117,10 @@ const checkbuttonGroupSA = new fmd.CheckbuttonGroup({
 // ---------------------------------------------------------------------------------------------------------------------
 // Kendo
 
+const timePickerField = new fmd.TimePickerField({
+	name: 'timePickerField'
+});
+
 // ---------------------------------------------------------------------------------------------------------------------
 
 export const formMetaDataObj = {
@@ -130,7 +134,8 @@ export const formMetaDataObj = {
 	radioFieldHorizontal,
 	checkbutton,
 	dropDownModifiedInput,
-	checkbuttonGroup
+	checkbuttonGroup,
+	timePickerField
 };
 
 export const standAlone = {

src/app/app.module.ts

@@ -1,5 +1,6 @@
-import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { DynaformModule } from './dynaform/dynaform.module';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@@ -11,6 +12,7 @@ import { JsonFormatterDirective } from './directives/json-formatter.directive';
 @NgModule({
 	imports: [
 		BrowserModule,
+		BrowserAnimationsModule,
 		FormsModule,
 		ReactiveFormsModule,
 		DynaformModule,

src/app/dynaform/components/index.ts

@@ -9,4 +9,6 @@ export { RadioComponent } from './native/radio/radio.component';
 export { DropdownModifiedInputComponent } from './custom/dropdown-modified-input/dropdown-modified-input.component';
 export { CheckbuttonComponent } from './custom/checkbutton/checkbutton.component';
 export { CheckbuttonGroupComponent } from './group/checkbutton-group/checkbutton-group.component';
+export { TimepickerComponent } from './kendo/timepicker/timepicker.component';
+
 

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

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

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

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

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

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

src/app/dynaform/dynaform.module.ts

@@ -10,12 +10,15 @@ import { DynafieldDirective } from './directives/dynafield.directive';
 import * as formFieldComponents from './components';
 const ffcArr = Object.values(formFieldComponents); // Array of all the Form Field Components
 
+import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
+
 @NgModule({
 	imports: [
 		CommonModule,
 		FormsModule,
 		ReactiveFormsModule,
-		NgbModule
+		NgbModule,
+		DateInputsModule
 	],
 	declarations: [
 		DynaformComponent,

src/app/dynaform/models/index.ts

@@ -13,7 +13,7 @@ interface SimpleFieldMetaData {
 	type?: string; 								// The component type e.g. BasicInput, Checkbutton, Timepicker, etc
 	label?: string;								// The field label - defaults to unCamelCased name if not supplied
 	value?: any;								// The field value - defaults to empty string if not supplied
-	deafult?: any;								// Default value
+	default?: any;								// Default value
 	placeholder?: string;						// Optional placeholder text
 	class?: string | Array<string>;				// CSS classes to apply
 	id?: string;								// CSS id to apply
@@ -38,7 +38,10 @@ interface DropdownModifiedInputFieldMetaData extends SimpleFieldMetaData {
 }
 
 interface TimePickerFieldMetaData extends SimpleFieldMetaData {
-	// To add...
+	// TODO: Tighhten up om types
+	value: Date;
+	format: string;
+	steps: StringMap
 }
 
 // ---------------------------------------------------------------------------------------------------------------------
@@ -167,10 +170,10 @@ class CheckbuttonGroup {
 // Kendo Form Component Models
 
 class TimePickerField extends SimpleField {
-	// To add...
-	constructor(meta: TimePickerFieldMetaData) {
-		super(meta);
-	}
+	type = 'Timepicker';
+	value: Date = new Date();
+	format = 'HH:mm';
+	steps = { hour: 1, minute: 15 };
 }
 
 // ---------------------------------------------------------------------------------------------------------------------