jQuery и AngularJS не работают вместе. Работает ли сборщик даты и времени jQuery или работает угловой расчет

0

Я вычисляю время и дату в угловом, но используя 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>
Теги:

1 ответ

2

Я предлагаю вам использовать специальные инструменты angularJS для этого: angular-bootstrap (timepicker здесь). Если вы попытаетесь использовать JQuery-плагин вне углового мира, угловые никогда не узнают, когда обновить переменные $scope (или вам придется вынудить его с помощью $scope.$apply())..

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню