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>

JavaScript

var myApp = angular.module('myApp', [])
	.controller('HistoryCtrl', HistoryCtrl);
  
function HistoryCtrl($scope) {
		var vm = this;
    var result = {
        result: 'success',
        start: new Date(2013, 10, 23, 3, 0, 0), //'2013-11-23 03:00:00',
        end: new Date(2013, 10, 24, 16, 30, 0), //'2013-11-24 16:30:00',
        delta: 0.05681799352169
    };

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

    function updateTimespan(start, end) {
		    vm.startDate = start;
      	vm.startTime = start;
        vm.endDate = end;
      	vm.endTime = end;
    }
}