Date picker not coming inside of ng repeat in AngularJS

Question

Am binding islamic date as date picker to text box , but when writing that inside of ng repeat its not working

my code

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <script src="Scripts/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.js"></script>
    <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.plus.min.js"></script>
    <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.plugin.min.js"></script>
    <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.picker.js"></script>
    <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.islamic.min.js"></script>
    <link href="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/css/jquery.calendars.picker.css" rel="stylesheet" />
</head>
<body>
    <div ng-app="myApp" ng-controller="AppCtrl">
        <table>
            <tr ng-repeat="r in rvm">
                <td>
                    <input type="text" id="txtHijriDate" ng-model="r.Date" />
                </td>
            </tr>
        </table>
    </div>
</body>

</html>
<script>
    var myApp = angular.module('myApp', []);
    myApp.controller('AppCtrl', function ($scope) {
        $scope.rvm = [];
        $('#txtHijriDate').calendarsPicker({
            calendar: $.calendars.instance('islamic'),
        });
    });
</script>

if i remove `ng-repeat="r in rvm" it is working but i want that date picker in ng repeat

Jurion · Accepted Answer · 2017-06-16 05:33:53Z

1

Your code puts 1 (and only 1) calendar on the element with ID txtHijriDate When you use ng-repeat, you create multiple elements with the same ID You need to add

 $('#txtHijriDate').calendarsPicker({
            calendar: $.calendars.instance('islamic'),
        });

Code in your JavaScript at every creation of element. And I’ll suggest to map “id” also to have ID dependent on your elements.

answered Jun 16, 2017 at 5:33

Jurion

1,32811 silver badges19 bronze badges

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

Comments

Arun Saini · Accepted Answer · 2017-06-16 10:16:50Z

Error: Calendar binding code is executing before controls(input box) load inside ng-repeat.

Solution: Use ng-bind directive to bind calendar on controls.

See the working demo below:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.js"></script>
    <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.plus.min.js"></script>
    <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.plugin.min.js"></script>
    <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.picker.js"></script>
    <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.islamic.min.js"></script>
    <link href="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/css/jquery.calendars.picker.css" rel="stylesheet" />
</head>
<body>

    <div ng-app="myApp" ng-controller="AppCtrl">
        <table>
            <tr ng-repeat="i in [1, 2,3,4,5] track by $index">
            
                <td>
                   <input type="text" ng-                                                   
                 ng-bind="bindDate('calendar-control'+$index)"                                 id="calendar-control{{$index}}"  
                  model="rvm[1].Date" /> 
                  
                </td>
            </tr>
        </table>
    </div>
</body>

</html>
<script>
    var myApp = angular.module('myApp', []);
    myApp.controller('AppCtrl', function ($scope) {
        $scope.rvm = [];       
            
        
        $scope.bindDate=function(id){           
        $('#'+id).calendarsPicker({
            calendar: $.calendars.instance('islamic'),
        });  
        }
    });
</script>

Collectives™ on Stack Overflow

Date picker not coming inside of ng repeat in AngularJS

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related