39262

angular ui bootstrap datepicker is-open directive not working

i'm trying to use angularjs ui bootstrap datepicker on my project but same code i grabbed from example doesn't seems to be working properly when i dig in to code i have realized the problem is with is-open attribute.sample code i tried to run on my project was.

<section class="panel panel-default"> <div class="panel-heading"><strong><span class="glyphicon glyphicon-th"></span> Datepicker</strong></div> <div class="panel-body" data-ng-controller="DatepickerDemoCtrl"> <div class="row"> <div class="col-sm-4"> <div class="input-group ui-datepicker"> <span class="input-group-addon"><i class="fa fa-calendar"></i></span> <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close"> </div> <div class="callout callout-info"> <p>Date is: {{dt | date:'fullDate'}}</p> </div> </div> <div class="col-sm-8"> <p> Format: <span class="ui-select"> <select ng-model="format" ng-options="f for f in formats"></select> </span> </p> <button class="btn btn-sm btn-info" ng-click="today()">Today</button> <div class="space"></div> <button class="btn btn-sm btn-default" ng-click="dt = '2009-08-24'">2009-08-24</button> <div class="space"></div> <button class="btn btn-sm btn-success" ng-click="toggleWeeks()" tooltip="For inline datepicker">Toggle Weeks</button> <div class="space"></div> <button class="btn btn-sm btn-danger" ng-click="clear()">Clear</button> <div class="space"></div> <button class="btn btn-sm btn-default" ng-click="toggleMin()" tooltip="After today restriction">Min date</button> </div> </div> </div> </section> .controller('DatepickerDemoCtrl', [ '$scope', function($scope) { $scope.today = function() { return $scope.dt = new Date(); }; $scope.today(); $scope.showWeeks = true; $scope.toggleWeeks = function() { return $scope.showWeeks = !$scope.showWeeks; }; $scope.clear = function() { return $scope.dt = null; }; $scope.disabled = function(date, mode) { return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6); }; $scope.toggleMin = function() { var _ref; return $scope.minDate = (_ref = $scope.minDate) != null ? _ref : { "null": new Date() }; }; $scope.toggleMin(); $scope.open = function($event) { $event.preventDefault(); $event.stopPropagation(); return $scope.opened = true; }; $scope.dateOptions = { 'year-format': "'yy'", 'starting-day': 1 }; $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate']; return $scope.format = $scope.formats[0]; } ])

updated

here is the demo plunker i have tried to assigning $parent.opened as well still not working

Answer1:

The problems is you're not using the open($event) function that is provided in your controller to open the datepicker itself.

<strong>FORKED PLUNKER</strong>

<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" ng-click="open($event)" />

Notice the ng-click event I added in the datepicker input, when you click the input element, it will open the datepicker. Likewise for the font-awesome calendar button on the right side of the input element, I have added an ng-click as well to open the calendar when it is clicked:

<span class="input-group-addon" ng-click="open($event)"> <i class="fa fa-calendar"></i> </span>

Furthermore, you were adding the bootstrap.js script in the plunker. Since you're already UI-Bootstrap, then it would be redundant to use bootstrap.js which depends on JQuery.

Recommend

  • “stack level too deep” When Processing Carrierwave Image Versions in Nested Form
  • DataTables+RequireJS: Cannot read property 'defaults' of undefined
  • Angularjs - Pagination appear after search filter
  • Python error: len() of unsized object while using statsmodels with one row of data
  • UWP : Print with out Printer Popup Dialoag
  • Displaying image retrieved from database to image control
  • Opening links in a new tab and only the new tab
  • replacing while loop with list comprehension
  • Google Calendar Api is not showing event list
  • Adding Parent and Child Nodes in TreeView from Sql Server 2008
  • JqueryMobile Popup menu is not working
  • The plugin 'org.apache.maven.plugins:maven-jboss-as-plugin' does not exist or no valid ver
  • FFmpeg Conversion Error
  • Java Scanner input dilemma. Automatically inputs without allowing user to type
  • QLineEdit password safety
  • Retrieving value from sql ExecuteScalar()
  • Nant, Vault & Windows Integrated Authentication
  • Bug in WPF DataGrid
  • MySQL WHERE-condition in procedure ignored
  • what is the difference between the asp.net mvc application and asp.net web application
  • Font Awesome Showing Box instead of Icons
  • jQuery tmpl and DataLink beta
  • Web-crawler for facebook in python
  • How can I estimate amount of memory left with calling System.gc()?
  • Properly structure and highlight a GtkPopoverMenu using PyGObject
  • Matrix multiplication with MKL
  • SQL merge duplicate rows and join values that are different
  • trying to dynamically update Highchart column chart but series undefined
  • Proper way to use connect-multiparty with express.js?
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • How to set the response of a form post action to a iframe source?
  • How do I configure my settings file to work with unit tests?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Is it possible to post an object from jquery to bottle.py?
  • MATLAB: Piecewise function in curve fitting toolbox using fittype
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Binding checkboxes to object values in AngularJs
  • How can I use `wmic` in a Windows PE script?
  • Python/Django TangoWithDjango Models and Databases
  • java string with new operator and a literal