Dynamically added using angular bootstrap date-time-picker not working

Question

I have used date time picker . It works fine when i use it as static. how to make it works, when i add the input fields dynamically. Html

<div class="form-group" ng-repeat="item in items">
        <div class="row" style="margin: 15px 0px;">
            <div class="col-md-6 col-lg-6 col-sm-6" style="padding-left:0">

                <label>Start Date</label>
                <p class="input-group">
                    <input type="text" class="form-control" datetime-picker="dd/MM/yyyy" enable-time="false" ng-model="item['start_date'+$index]" is-open="['start_date'+$index].open"  />

                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default" ng-click="openCalendar($event, 'start_date',$index)"><i class="fa fa-calendar"></i></button>
                    </span>
                </p>

            </div>
      </div>
</div>
    <button ng-click="add()">Add New Row</button>

controller

          $scope.items = [];
    $scope.add = function() {
        $scope.items.push({
            start_date:"",
        });
    }
    $scope.openCalendar = function(e,picker,index) {
        console.log('index',index);
           console.log('picker',picker);
        var picker_index=picker+index;
        console.log($scope[picker_index])
        $scope.[picker_index]open = true;
        console.log( $scope[picker][index])
    };

plunker here

i am not able to open the particular datepicker using index value from the ng-model and is-open attribute. since the datepickers are adding dynamically. can anyone please help me on this.

Prianca · Accepted Answer · 2016-07-02 17:14:55Z

3

Create new variable for every isOpen and make it true for ng-click. See it it helps Updated the plunkr http://plnkr.co/edit/dSqX4O?p=preview

 <div class="form-group" ng-repeat="item in items">
    <div class="row" style="margin: 15px 0px;">
        <div class="col-md-6 col-lg-6 col-sm-6" style="padding-left:0">

            <label>Start Date</label>
            <p class="input-group">
                <input type="text" class="form-control" datetime-picker="dd/MM/yyyy" enable-time="false" ng-model="item['start_date'+$index]" is-open="isOpen1"  />

                <span class="input-group-btn">
                    <button type="button" class="btn btn-default"  ng-click="isOpen1= true")"><i class="fa fa-calendar"></i></button>
                </span>
            </p>

        </div>
  </div>

Add New Row

var app = angular.module('app', ['ui.bootstrap', 'ui.bootstrap.datetimepicker']);

app.controller('MyController', ['$scope', function($scope) {

// $scope.openCalendar = function(e,index, picker) {
//   console.log('index',index)
//   $scope.isOpen1.index=false;
//   // $scope[picker][index].open = true;
// };
    $scope.items = [];
    $scope.add = function() {
        $scope.items.push({
            start_date:"",


        });
    }

}]);

edited Jul 2, 2016 at 17:14

answered Jun 29, 2016 at 7:47

Prianca

4842 silver badges8 bronze badges

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

3 Comments

codelearner Over a year ago

It is giving error like this, angular.js:13642 Error: [$parse:lval] http://errors.angularjs.org/1.5.6/$parse/lval when i add ng-click="isOpen1+$index= true"

codelearner Over a year ago

This method didn't work , can you please tell me why

codelearner Over a year ago

i have added plunker , can you update the plunker please

Collectives™ on Stack Overflow

Dynamically added using angular bootstrap date-time-picker not working

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related