CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
syed99
syed99

Reputation: 332

BootStrap date picker in table cell, showing all the datepickers in the columns

I am facing a problem when using bootstrap date picker in a table cell, the date pickers are getting opened in all the cells of same column in each row, i wanted to open the datepicker only one cell at time.

This is the plunker i created for demo:http://plnkr.co/edit/xvoz9KIpACsWbAEKqZR1?p=preview and this is the sample code for the table.

<table border="1" id="tAtbl1" >
            <tr>

                <td>Start Date</td>
                <td>End Date</td>

            </tr>
            <tr data-ng-repeat="assignedData in assignedDetails">
                <td>
                <input type="text" class="form-control dateFields"
                        datepicker-popup="MM/dd/yyyy" data-ng-   model="assignedData.startDate"  
                        is-open="startDateOpened" min-date="minDate" 
                        max-date="'2015-06-22'" datepicker-options="dateOptions"
                        date-disabled="disabled(date, mode)" ng-required="true"
                        close-text="Close" ng-click="startDatePopupOpen($event)"  size="11"  />
                </td>
                <td>
                <input type="text" class="form-control dateFields"
                        datepicker-popup="MM/dd/yyyy" data-ng-model="assignedData.endDate"   
                        is-open="endDateOpened" min-date="minDate"
                        max-date="'2015-06-22'" datepicker-options="dateOptions"
                        date-disabled="disabled(date, mode)" ng-required="true"
                        close-text="Close" ng-click="endDatePopupOpen($event)" size="11" /></td>

            </tr>
        </table>

can any body give some idea, about how to implement it?

Upvotes: 2

Views: 5463

Answers (1)

Monika V
Monika V

Reputation: 21

I had the same issue and this thread helped. https://github.com/angular-ui/bootstrap/issues/2384

Here is the plnkr from the thread. http://plnkr.co/edit/wiMKB3EiXIaDuv84CLHH?p=preview 

<body ng-controller="MainCtrl">
    <form class="form-horizontal container">
      <div ng-repeat="example in examples" class="form-group col-md-12">
        <label>{{$index}}</label>
        <div class="input-group">
          <input class="form-control" type="text" datepicker-popup="dd/MM/yyyy" ng-model="example.date" is-open="example.isOpen" />
          <span class="input-group-btn">
            <button class="btn btn-default" ng-click="open($event, example)">open</button>
          </span>
        </div>
      </div>
    </form>
  </body>


  $scope.open = function($event, example) {
    $event.preventDefault();
    $event.stopPropagation();

    example.isOpen = true;
  };

Upvotes: 2

Related Questions