JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div ng-app ng-controller="HistoryCtrl">
    <input type="date" ng-model="startDate" />
    <input type="time" ng-model="startTime" />
    <input type="date" ng-model="endDate" />
    <input type="time" ng-model="endTime" />
    <button ng-click="updateForm()">Update</button>
    <pre>Start Date: {{ startDate }}
Start Time: {{ startTime }}
End Date: {{ endDate }}
End Time: {{ endTime }}
    </pre>
</div>

JavaScript

function HistoryCtrl($scope) {

    $scope.result = {
        result: 'success',
        start: '2013-11-23 03:00:00',
        end: '2013-11-24 16:30:00',
        delta: 0.05681799352169
    };

    $scope.updateForm = function () {
        console.log('updating delta balance');
        $scope.updateTimespan($scope.result.start, $scope.result.end);
    };

    $scope.updateTimespan = function (start, end) {
        $scope.startDate = start.split(" ")[0];
        $scope.startTime = start.split(" ")[1];
        $scope.endDate = end.split(" ")[0];
        $scope.endTime = end.split(" ")[1];
    }
}