Angular Input Modified Demo - AngularUI Bootstrap TimePicker Example

<!DOCTYPE html>
<html ng-app="DemoApp">

<head>
    <link rel="stylesheet" href="//rawgit.com/twbs/bootstrap/v3.3.0/dist/css/bootstrap.css">
    <link rel="stylesheet" href="style.css">
</head>

<body ng-controller="DefaultController">

    <h1>Angular Input Modified Demo</h1>
    <p class="subtitle">AngularUI Bootstrap TimePicker Example</p>

    <form name="taskForm" novalidate>
        
        <pre>            
            Form modified: {{ taskForm.modified ? 'Yes' : 'No' }}
            Modified count: {{ taskForm.modifiedCount }}
            Modified models: {{ taskForm.modifiedModels }}
            
            Value: {{ task.dateStart }}
        </pre>
        
        <!-- Start date -->
        <div class="form-group">
            <label for="date-start" class="control-label">Start date:</label>
            
            <input type="hidden" name="dateStart" ng-model="task.dateStart" bs-modifiable>

            <timepicker
                class="timepicker"
                ng-model="task.dateStart"
            ></timepicker>

            <p class="reset">
                <button ng-click="taskForm.dateStart.$setPristine()">Save This Field</button>
                <button ng-click="taskForm.dateStart.reset()">Reset This Field</button>
            </p>
            <p class="master">Master: "{{ taskForm.dateStart.masterValue }}"</p>
            <p class="modified">Modified: {{ taskForm.dateStart.modified ? 'Yes' : 'No' }}</p>
        </div>

        <!-- Buttons -->
        <div class="form-group footer">
            <p>Button is disabled when form is not modified <i>(nothing to save)</i>
            </p>
            <div class="control buttons">
                <button
                    type="submit"
                    class="btn btn-primary"
                    ng-click="taskForm.$setPristine()"
                    ng-disabled="!taskForm.modified"
                >
                    Save Form
                </button>
                <button
                    type="button"
                    class="btn btn-default"
                    ng-disabled="!taskForm.modified"
                    ng-click="taskForm.reset()"
                >Reset Form</button>
            </div>
        </div>
        
    </form>
    
    <!-- Scripts -->
    <script src="//rawgit.com/angular/bower-angular/v1.3.2/angular.js"></script>
    <script src="//rawgit.com/angular-ui/bootstrap-bower/0.11.2/ui-bootstrap.js"></script>
    <script src="//rawgit.com/angular-ui/bootstrap-bower/0.11.2/ui-bootstrap-tpls.js"></script>
    <script src="//rawgit.com/betsol/angular-input-modified/master/dist/angular-input-modified.js"></script>
    <script src="script.js"></script>
    
</body>

</html>

(function(document, angular) {

    'use strict';

    angular.module('DemoApp', ['ui.bootstrap', 'DatepickerWorkaround', 'ngInputModified'])
        .config(function(inputModifiedConfigProvider) {
            inputModifiedConfigProvider.disableGlobally();
        })
        .controller('DefaultController', function($scope, TaskService, $timeout) {
            
            $scope.task = {
                dateStart: new Date(2014, 0, 1, 0, 0, 0, 0)
            };
            
            TaskService.loadTask().then(function(task) {
                
                $scope.task = task;
                
                // We need to call setPristine() after the digest cycle.
                $timeout(function() {
                    $scope.taskForm.$setPristine();
                });
            });

        })
        .factory('TaskService', function($timeout) {
            return {
                loadTask: function() {
                    return $timeout(function() {
                        return {
                            dateStart: new Date(2014, 0, 1, 17, 45, 0, 0)
                        };
                    }, 3000);
                }
            };
        })
    ;
    
    /**
     * This is a workaround for Angular UI DatePicker bug #2659:
     * See: https://github.com/angular-ui/bootstrap/issues/2659
     */
    angular
        .module('DatepickerWorkaround', [])
        .directive('datepickerPopup', function () {
            return {
                restrict: 'EAC',
                require: 'ngModel',
                link: function (scope, element, attr, controller) {
                    // Remove the default formatter from the input directive to prevent conflict.
                    controller.$formatters.shift();
                }
            }
        })
    ;

})(document, angular);

body {
    padding: 40px;
}

p.subtitle {
    font-weight: bold;
    font-size: 18px;
}

/** Decorating elements as valid only if they are modified */
.control input.ng-valid.ng-modified {
    background-color: #EFE;
    border-color: #6A6;
}

/** Decorating entire form-group */
.form-group.valid.modified {
    border-style: solid;
    background-color: #EFE;
    border-color: #6A6;
}

div.footer {
    margin-top: 10px;
}

div.footer button {
    margin-left: 5px;
    padding: 5px 20px;
}
div.footer button:first-child {
    margin-left: 0;
}

.control input.ng-invalid {
    background-color: #FEE;
    border-color: #F66;
}

.form-group {
    margin: 10px;
    padding: 10px;
    border: 1px dashed #AAA;
}

.form-group label {
    color: 000;
    font-size: 13px;
    font-weight: bold;
}

p.master, p.modified {
    margin: 0;
    padding: 0;
    color: #888;
    font-family: monospace;
    white-space: pre;
}

p.reset button {
    padding: 0 5px;
    font-size: 10px;
    color: #333;
}

div.radio-inline {
    display: inline-block;
    margin-left: 10px;
}
div.radio-inline:first-child {
    margin-left: 0;
}
div.radio-inline label {
    font-weight: normal;
}

.timepicker input {
    width: 50px;
}

.timepicker .form-group {
    border: none;
}