JSFiddle - React, Tailwind, and code Playground

by mickeyvip

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="HistoryCtrl as historyCtrl">
    <input type="date" ng-model="historyCtrl.startDate" />
    <input type="time" ng-model="historyCtrl.startTime" />
    <input type="date" ng-model="historyCtrl.endDate" />
    <input type="time" ng-model="historyCtrl.endTime" />
    <button ng-click="historyCtrl.updateForm()">Update</button>
    <pre>
Start Date: {{ historyCtrl.startDate | date:'yyyy-MM-dd' }}
Start Time: {{ historyCtrl.startTime | date:'hh:mm' }}
End Date: {{ historyCtrl.endDate | date:'yyyy-MM-dd' }}
End Time: {{ historyCtrl.endTime | date:'hh:mm' }}
    </pre>
</div>

TypeScript

interface Result {
	result: string,
  start: Date,
  end: Date,
  delta: number
}

class HistoryCtrl {
    result: Result = {
        result: 'success',
        start: new Date(2013, 10, 23, 3, 0, 0),
        end: new Date(2013, 10, 24, 16, 30, 0),
        delta: 0.05681799352169
    };
    startDate: Date;
		startTime: Date;
		endDate: Date;
		endTime: Date;

    updateForm(): void {
        console.log('updating delta balance');
        this.updateTimespan(this.result.start, this.result.end);
    };

		updateTimespan(start: Date, end: Date): void {
		    this.startDate = start;
      	this.startTime = start;
        this.endDate = end;
      	this.endTime = end;
    }
}

const myApp = angular.module('myApp', [])
	.controller('HistoryCtrl', HistoryCtrl);