Removing button from Angularjs UI bootstrap datepicker

Question

From the example of UI Bootstrap of Angularjs I managed to create UI datepicker using following code.

<div class="col-md-2">
 <p class="input-group">
    <input type="text" class="text-box input-large input-large-altered" name="HandOverToOwner" datepicker-popup="dd.MM.yyyy"  ng-model="project.dt" is-open="opened" ng-required="true"  />
          <span class="input-group-btn">
             <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
           </span>
  </p>
  <span class="help-block" ng-show="ProjectCreate.HandOverToOwner.$error.required">Required*</span>
</div>

Now I want to get rid of calendar button and enable popup the calendar when edit box is selected. How do I replace this is-open="opened" attribute?

app.controller('createProjectController', ['$scope', function ($scope, $timeout) {

     $scope.project = {};
       $scope.clear = function () {
            $scope.project.dt = null;
        };
        $scope.open = function ($event) {
            $event.preventDefault();
            $event.stopPropagation();
            $scope.opened = true;
        };

        $scope.format = 'dd.MM.yy';

        $scope.dateOptions = {
            formatYear: 'yy',
        };
    }]);

Hilde · Accepted Answer · 2014-06-06 14:06:12Z

3

If I have understood your question right and you want the datepicker to be triggered when you click in the input field, you need to add ng-click=open($event) in your <input>element.

<div class="col-md-2">
 <p class="input-group">
    <input type="text" class="text-box input-large input-large-altered" name="HandOverToOwner" datepicker-popup="dd.MM.yyyy"  ng-model="project.dt" is-open="opened" ng-click="open($event)" ng-required="true"  />
  </p>
  <span class="help-block" ng-show="ProjectCreate.HandOverToOwner.$error.required">Required*</span>
</div>

See plunker

EDIT

<div class="col-md-2">
 <p class="input-group">
    <input type="text" class="text-box input-large input-large-altered" name="HandOverToOwner" datepicker-popup="dd.MM.yyyy"  ng-model="project.dt1" is-open="opened['id1']" ng-click="open($event, 'id1')" ng-required="true"  />
  </p>
  <p>
    <input type="text" class="text-box input-large input-large-altered" name="HandOverToOwner" datepicker-popup="dd.MM.yyyy"  ng-model="project.dt2" is-open="opened['id2']" ng-click="open($event, 'id2')" ng-required="true"  />
  </p>
  <span class="help-block" ng-show="ProjectCreate.HandOverToOwner.$error.required">Required*</span>
</div>

In js file

$scope.opened = [] # initalize open as array somewhere in your controller

$scope.open = function ($event, id) {
  $event.preventDefault();
  $event.stopPropagation();
  $scope.opened[id] = true;
};

new plunker

edited Jun 6, 2014 at 14:06

answered Jun 6, 2014 at 13:25

Hilde

4665 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Muffin Over a year ago

Hello thanks for your response. But in this case If I have multiple datepicker in same form, by clicking one it opens the popup in all box. In other case I will have to write function for each text-box. Is there any way without ng-click="open($event)" attribute.

Hilde Over a year ago

Ok. Added a possible (but maybe a little messy) way to use multiple datepickers. The solution is to use an array for $scope.opened and use this in is-open in html. Added a plunker for this as well.

Muffin Over a year ago

This solved the problem.. Thanks. However I noticed that if I switch to version 0.10.0 is-open is not required for ng-click attribute is not required anymore. I don't why :) But for now I will take your solution. Thanks for helping this newbie...

Mo. Over a year ago

@Hilde I am curious to see your answer in the plunkler but unfortunately the link doesn't work :(

Hilde Over a year ago

@MuhammedAthimannil It seems that the plunkers are gone, yes. Thx for providing me feedback on taht. I will provide some new as soon as I can! I'll let u know when it's fixed :)

Collectives™ on Stack Overflow

Removing button from Angularjs UI bootstrap datepicker

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related