CODEWITHSUNDEEP
twitter-bootstrapangularjsdirectivedatepicker
michal
michal

Reputation: 161

clickable bootstrap-datepicker icon with angular directive

I'm using angularjs and I want my bootstrap-datepicker to be shown after clicking in calendar icon.
Now it's like this:

<div class="input-append date datepicker">
    <input type="text" b-datepicker ng-model="date"/> 
    <span class="add-on" ><i class="icon-calendar"></i></span>
</div>


Where b-datepicker is custom directive. Click in text field shows datepicker, but icon click doesn't work.
Here's sources: http://jsfiddle.net/cPVDn/

My goal is to be like this:
http://jsfiddle.net/6QnMB/

I appreciate any help

UPDATE:
Here's solution:
http://jsfiddle.net/cPVDn/53/

Upvotes: 5

Views: 13138

Answers (3)

michal
michal

Reputation: 161

I'm posting solution as separate answer.

To make icon click work instead of:

directive('bDatepicker', function () {
return {
    restrict: 'A',
    link: function (scope, el, attr) {
       el.datepicker();
     }
  };
})

one could use something like:

directive('bDatepicker', function () {
return {
    restrict: 'A',
    link: function (scope, el, attr) {
        el.datepicker({});
        var component = el.siblings('[data-toggle="datepicker"]');
        if (component.length) {
            component.on('click', function () {
                el.trigger('focus');
            });
        }
    }
  };
})

Here is full snippet with solution: http://jsfiddle.net/cPVDn/53/

Upvotes: 1

dxvargas
dxvargas

Reputation: 815

In the example in bootstrap documentation they do it somewhat like this:

<div class="input-append date datepicker">
  <input type="text" is-open="opened" datepicker-popup ng-model="date"/> 
  <span class="add-on" ng-click="openAction($e)" ><i class="icon-calendar"></i></span>
</div>

And then in the controller:

  $scope.openAction = function ($event) {

    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = !$scope.opened;   
}

Upvotes: 0

Maxim Shoustin
Maxim Shoustin

Reputation: 77910

See good plugin from AngularStrap that will solve your problem: link.

JS

.config(function($datepickerProvider) {
  angular.extend($datepickerProvider.defaults, {
    dateFormat: 'dd/MM/yyyy',
    startWeek: 1
  });
})

HTML

<input type="text"
    class="form-control"
    ng-model="selectedDateAsNumber" 
    data-date-format="yyyy-MM-dd"
    data-date-type="number" 
    data-min-date="02/10/86"
    data-max-date="today"
    data-autoclose="1" 
    name="date2"
    bs-datepicker>

See Demo Plunker

And this is their main page

Upvotes: 1

Related Questions