JSFiddle - React, Tailwind, and code Playground

by dcodesmith

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<div ng-controller="myExampleCtrl" ng-app="myExampleApp">
     <h1>Lap Time</h1>

    <div>
        <div lap-time-input="lap.lap_time"></div>
    </div>
    <hr /> <strong>Time in Seconds: {{ lap.lap_time }}</strong>

</div>

JavaScript

angular.module('myExampleApp', []);

angular.module('myExampleApp')
    .controller('myExampleCtrl', function ($scope) {

    // This would usually be a $resouce return via a serice
    $scope.lap = {
        lap_time: 90.999
    };
        
        $scope.$watch('lap.lap_time', function (newLapTime) {
            console.log('newLapTime', newLapTime);
        });

});

angular.module('myExampleApp')
    .directive('lapTimeInput', function ($window) {
    var tpl = '<div class="lap_time_input"> \
	          <input ng-model="lapTimeInput" type="number" placeholder="00.00"> \
	          <input ng-model="lap_time.minutes" type="number" class="minutes" placeholder="00" min="0" max="15" step="1"> \
            <span class="lap-time-sep">:</span> \
            <input ng-model="lap_time.seconds" type="number" class="seconds" placeholder="00" min="0" max="59" step="1"> \
            <span class="lap-time-sep">.</span> \
            <input ng-model="lap_time.milliseconds" type="number" class="milliseconds" placeholder="000" min="0" max="999" step="1"> \
            </div>';

    return {
        restrict: 'A',
        template: tpl,
        replace: true,
        scope: {
            lapTimeInput: '='
        },
        link: function (scope, element, attrs) {

            scope.$watch('lapTimeInput', function (newValue) {
                var duration = moment.duration(newValue, 'seconds');
                scope.lap_time = {
                    minutes: duration.minutes(),
                    seconds: duration.seconds(),
                    milliseconds: duration.milliseconds()
                }
            });
            
            scope.$watchCollection('lap_time', function (newTime, oldTime) {
                scope.lapTimeInput = moment.duration(newTime, 'seconds').asSeconds();
            });
        }
    };
});