Question

我正在以角度计算时间和日期，但使用jquery作为日期选择器。无论是日期还是计时器选择器都工作或角度计算并且添加删除工作都不起作用。

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.timepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery.timepicker.css" />
    <script type="text/javascript" src="lib/bootstrap-datepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="lib/bootstrap-datepicker.css" />
    <link rel="stylesheet" type="text/css" href="lib/site.css" />
</head>
<body>
<section id="examples">
    <div class="demo">
        <div ng-app="myApp" ng-controller="MyCtrl" data-ng-init="date='';hour='';date2='';hour2='';price='';number='';hours=''">
            <div ng-repeat="input in inputs" class="box" id="datepairExample">
                <input type="text" ng-model="date" class="date start">
                <!-- <input type="text" class="date start" />
                 <input type="text" class="time start" /> -->

                <input type="text" ng-model="hour" class="time start">to
                <input type="text" ng-model="date2" class="date end">
                <!--<input type="text" class="date end" />
                <input type="text" class="time end" />-->
                <input type="text" ng-model="hour2" class="time end">


                <p style="display:none">{{days = (date2 - date)/1000/60/60/24}} </p>
                <p style="display:none">{{hours = (hour2 - hour)/1000/60/60}}</p>
                <p style="display:none">{{hours < '0' ? days = (days-1) : days = days}}</p>
                <p>Days :
                    <input value="{{days > '0' ? days : ''}}" nd-model=""/>
                </p>
                <p><b>Hours:</b>
                    <input value="{{hours < '0' ? (24+hours) : hours}}" nd-model="" />
                </p>

                <button ng-click="removeInput($index)">Remove</button>
            </div>

            <button ng-click="addInput()">Add Booking</button>
        </div>

    </div>

    <script>
        var app = angular.module('myApp', []);

        app.controller('MyCtrl', ['$scope', function ($scope) {
            $scope.inputs = [];

            $scope.addInput = function(){
                $scope.inputs.push({field:'', value:''});
            }

            $scope.removeInput = function(index){
                $scope.inputs.splice(index,1);
            }
        }]);

    </script>
    <script src="http://jonthornton.github.io/Datepair.js/dist/datepair.js"></script>
    <script src="http://jonthornton.github.io/Datepair.js/dist/jquery.datepair.js"></script>
    <script>
        $('#datepairExample .time').timepicker({
            'showDuration': true,
            'timeFormat': 'g:ia'
        });

        $('#datepairExample .date').datepicker({
            'format': 'm/d/yyyy',
            'autoclose': true
        });

        $('#datepairExample').datepair();
    </script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
    </div>

</body>
</html>

Answer 1

我建议您使用专用的angularJS工具来执行此操作：angular-bootstrap（timepicker此处）。如果您尝试在角度世界之外使用Jquery插件，angular将永远不知道何时更新其$scope变量（或者您必须强制使用$scope.$apply()）..

jQuery和AngularJS没有合作。 jQuery日期时间选择器工作或角度计算工作

1 个答案: