jQuery and AngularJS not working together. Either jQuery datetime picker working or Angular calculation working

Question

I am calculating time and date in angular but using jquery for date picker. Both r not working together either date and timer picker is working or angular calculation and add remove is working.

<!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>

Likely not related, but you never close your <section> tag. — user736893
– user736893, Commented Dec 14, 2015 at 20:10

Jscti · Accepted Answer · 2015-07-06 12:30:55Z

2

I suggest you to use dedicated angularJS tools to do that : angular-bootstrap (timepicker here). If you try to use Jquery plugin outside of the angular world, angular will never know when to update its $scope variables (or you'll have to force it with $scope.$apply())..

answered Jul 6, 2015 at 12:30

Jscti

14.5k5 gold badges66 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery and AngularJS not working together. Either jQuery datetime picker working or Angular calculation working

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related