How to get uibmodel dialog textbox value to parent controller in angularjs

107 views Asked by At

I have a page with text box, this is a separate controller. When am clicking on the text box there is a modal dialog opened using uibmodal using ui-bootstrap. In that model there is two date picker fields when selection those two date fields and clicking on apply button then those selected two text box value needs to be rendered in the parent text box. How to achieve this using angularjs, tried many ways nothing helps

tried the below code

$scope.openDateTimePicker = function(object){
    console.log("Inside function");
    $scope.animationsEnabled = true;
    var modalInstance = $uibModal.open({
         animation: $scope.animationsEnabled,
         templateUrl: 'datepicker.tpl.html',
         controller: 'DateInstanceCtrl',
         size: 'sm',
         resolve: {
         items: function () {
            return $scope.items;
           }
          }
      });
};




.controller('DateInstanceCtrl', function ($scope, $uibModalInstance) {
  $scope.apply = function () {
     console.log("value:::"+$uibModalInstance.startDateTime);
     $uibModalInstance.close();
  };
  $scope.close = function () {
    $uibModalInstance.dismiss('close');
  };
})

datepicker.tpl.html

<header class="modal-header"></header>
<div class="modal-body">

    <table>
        <tr>
            <td>Start Date</td>
            <td><input type="datetime-local" id="startDateTime"
                name="startDateTime" ng-model="startDateTime"
                placeholder="yyyy-MM-ddTHH:mm:ss" min="2001-01-01T00:00:00"
                max="2199-12-31T00:00:00" required /></td>
        </tr>
        <tr>
            <td>End Date</td>
            <td><input type="datetime-local" id="endDateTime"
                name="endDateTime" ng-model="endDateTime"
                placeholder="yyyy-MM-ddTHH:mm:ss" min="2001-01-01T00:00:00"
                max="2199-12-31T00:00:00" required /></td>
        </tr>
    </table>
</div>
<div class="modal-footer">
    <button ng-click="apply()" class="btn btn-primary">Apply</button>
    <button ng-click="close()" class="btn">Close</button>
</div>
0

There are 0 answers