0

I am using angular bootstrap to develop my SPA and need a date picker in my form.

I nearly copied the whole code from angular bootstrap example for a date picker. However, when I click the calendar icon, the picker will not pop up as the example. I've found that the datepicker's is-open attibute has been successfully bound to the controller's controlling variable (status.opened is this case). But when ng-click fires the controller's function (openpicker()) to set status.opened=true, that value won't change and no error is output to the console.

Can anyone help me on this? Thanks!

The HTML:

<div class='row' ng-controller='DatepickerCtrl'>
    <div class='col-lg-1'>4</div>
    <div class='col-lg-3'>birthday. {{status.opened}}</div>
    <div class='col-lg-4'>
        <p class="input-group">
        <input type="text" class="form-control" datepicker-popup ng-model='dt' is-open='status.opened' ng-required="true" close-text="Close" />
        <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click='openpicker()'><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
        </p>
    </div></div>

The javascript code:

function dtctrl($scope, $timeout) {

  $scope.today = function() {
    $scope.dt = new Date();
  };
  $scope.today();

  $scope.clear = function () {
    $scope.dt = null;
  };

  // Disable weekend selection
  $scope.disabled = function(date, mode) {
    return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
  };

  $scope.toggleMin = function() {
    $scope.minDate = $scope.minDate ? null : new Date();
  };
  $scope.toggleMin();
  $scope.maxDate = new Date(2020, 5, 22);

  $scope.openpicker = function() {

      $scope.status.opened = true;

  };

  $scope.dateOptions = {
    formatYear: 'yy',
    startingDay: 1
  };

  $scope.status = {
    opened: true
  };     
}
Cœur
  • 37,241
  • 25
  • 195
  • 267
xing
  • 464
  • 9
  • 17
  • i know it can seem basic or stupid, but what is the order you include script in your page – ThomasP1988 Sep 07 '15 at 01:06
  • I don't know why, but according to this post http://stackoverflow.com/questions/20212813/ui-bootstrap-datepicker-is-open-not-working-in-modal, using $timeout to set the controlling variable works for me. – xing Sep 07 '15 at 01:10
  • $timeout like as the pain killer, if you have troubled to display something, so use $timeout. – Shohel Sep 07 '15 at 01:59
  • Your controller seems to be ok, [see this fiddle](http://jsfiddle.net/cLrhujwe/), do you require ui.bootstrap in your module?) – gyantasaurus Sep 07 '15 at 03:45
  • yes ui.bootstrap is included. One thing to be noted is this controller is in a ui-view, maybe this is the difference? – xing Sep 07 '15 at 05:49

0 Answers0