1

I am new to angularjs and also for ng-admin.I am using ng-admin for my project. In that I make custom page in that I have to use UI bootstrap date picker.But popup is not coming. Below is my code.

here is my custom page code.

<div class="input-group datepicker">
  <input type="text" ng-model="rawValue" id="" name="{{ name }}" class="form-     control"
  uib-datepicker-popup="{{ format }}" is-open="isOpen" ng-required="{{v}}"/>
<span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="toggleDatePicker($event)">
      <i class="glyphicon glyphicon-calendar"></i>
    </button>
</span>
</div>

here is my javascript code.

 $scope.rawValue = new Date();

 $scope.format = "yyyy-MM-dd";

 $scope.v = true;
 $scope.isOpen = false;

  $scope.toggleDatePicker = function ($event) {
  $event.preventDefault();
  $event.stopPropagation();

  };

Please help me in this regard.

Actually when I include ui-bootsrap.min.js file in "index.html" custom page datepicker is working fine.But ng-admin normal page datepickers and filter popups are not working.

Surendra Srikakula
  • 21
  • 4

1 Answers1

0

Because of you used is-open="isOpen" in your input tag and set $scope.isOpen = false; in your controller but when call toggleDatePicker function on button click didn't set $scope.isOpen = true;

so need to set $scope.isOpen = !$scope.isOpen; for toggle

$scope.toggleDatePicker = function ($event) {
    $event.preventDefault();
    $event.stopPropagation();
    $scope.isOpen = !$scope.isOpen;
};

NB: ensure that you injected properly 'ui.bootstrap' in your module

angular.module('yourModuleName', ['ui.bootstrap'])

Updated:

Absolutely you should include ui-bootsrap.min.js in index.html file because of ng-admin didn't include ui-bootsrap. So your module will be like :

angular.module('yourModuleName', ['ng-admin', 'ui.bootstrap']);
Shaishab Roy
  • 16,335
  • 7
  • 50
  • 68
  • I tried like the above but it didn't work for me. Actually in HTML file webstorm shows "is-open" attribute is not allowed inside tag. – Surendra Srikakula Apr 24 '16 at 11:59
  • any error shown in console? webstorm warning not a problem because `is-open` not a valid html attribute – Shaishab Roy Apr 24 '16 at 12:04
  • not showing any error in console. Date is also not coming in "yyyy-MM-dd" format in input box.It is coming like full format date like "Sun Apr 24 2016 17:35:23 GMT+0530 (India Standard Time)". – Surendra Srikakula Apr 24 '16 at 12:06
  • can you make plunker demo or like other ? – Shaishab Roy Apr 24 '16 at 12:16
  • Actually datepicker is working in normal pages in my project through ng-admin.But it is not working only in custom page I've made in ng-admin. That too I have not added any javascript file for bootstrap. – Surendra Srikakula Apr 24 '16 at 12:29
  • are you injected `'ui.bootstrap'` as a module dependency ? @SurendraSrikakula – Shaishab Roy Apr 24 '16 at 12:46
  • Actually when I include ui-bootsrap.min.js file in "index.html" and injected the 'ui.bootstrap' module custom page datepicker is working fine.But ng-admin normal page datepickers and filter popups are not working. – Surendra Srikakula Apr 24 '16 at 13:20
  • Absolutely you should include `ui-bootsrap.min.js` in **index.html** file because of `ng-admin` didn't include `ui-bootsrap`. So your module will be like `angular.module('myApp', ['ng-admin', 'ui.bootstrap']);` – Shaishab Roy Apr 24 '16 at 13:28
  • But if I add the ui-bootsrap.min.js in "index.html" file and also 'ui.bootstrap' module to "myApp", ng-admin filter dropdown and filter datepickers are not working, only custom page datepicker is working. – Surendra Srikakula Apr 24 '16 at 14:40