jQuery和AngularJS不能一起工作.jQuery日期时间选择器工作或Angular计算工作

我在角计算时间和日期，但使用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>

我建议你使用专用的angularJS工具:angular-bootstrap(这里是时间选择器)。如果你试图在angular世界之外使用Jquery插件，angular永远不会知道何时更新它的$scope变量(或者你必须强制它使用$scope.$apply()).

相关内容

最新更新

热门标签：