CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scope
Suresh B
Suresh B

Reputation: 1652

How to create directive for this date picker example?

I am new for angularjs here i created some sample for date-picker, which is working fine. I want to create a directive for this sample.. i tried its working but after selected the date it show format is not define... for this sample i need a directive.. any of one help me on this... thanks

var app = angular.module('myapp', ['ng-bootstrap-datepicker']);
app.controller('AppCtrl', function ($scope) {
$scope.datepickerOptions = {
                    format: 'yyyy-mm-dd',
                    language: 'en',
                    autoclose: true,
                    weekStart: 0
                };
  
  $scope.date = '2000-03-12'
});
var appboot = angular.bootstrap(document, ['myapp']);
<link href="https://rawgit.com/cletourneau/angular-bootstrap-datepicker/master/dist/angular-bootstrap-datepicker.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/2.0.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="https://rawgithub.com/cletourneau/angular-bootstrap-datepicker/master/dist/angular-bootstrap-datepicker.js" charset="utf-8"></script>



<div ng-app="myapp" ng-controller="AppCtrl">
            <input id="datepicker" type="text" data-ng-datepicker data-ng-options="datepickerOptions" data-ng-model="date">
            <input id="datepickerMirror" type="text" data-ng-model="date">
</div>

Upvotes: 4

Views: 1887

Answers (1)

tavnab
tavnab

Reputation: 2734

If you can use a more modern datepicker (along with its dependencies on a new AngularJS & Bootstrap), below is an example of a very simple directive called my-datepicker, which just takes a date attribute as its model and wraps the uib-datepicker-popup functionality.

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

.directive('myDatepicker', function() {
  return {
    restrict: 'E',
    scope: {
      date: '='
    },
    templateUrl: 'partials/my-datepicker.html',
    link: function(scope, element, attrs) {
      scope.status = {
        opened: false
      };

      scope.open = function(event) {
        scope.status.opened = true;
      };
    }
  };
})

.controller('AppCtrl', ['$scope', function ($scope) {
  $scope.date = '2000-03-12';
}]);
.input-group {
  width: 200px;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>

<div ng-app="myApp" ng-controller="AppCtrl">
  <script type="text/ng-template" id="partials/my-datepicker.html">
    <div class="input-group">
      <input class="form-control" type="text" uib-datepicker-popup ng-model="date"
             is-open="status.opened">
      <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open($event)">
          <span class="glyphicon glyphicon-calendar"></span>
        </button>
      </span>
    </div>
  </script>

  <div class="container">
    <my-datepicker date="date"></my-datepicker>
  </div>

  <input id="datepickerMirror" type="text" ng-model="date">
</div>

Note that the date model gets passed into your directive will be used as the ng-model for the actual uib-datepicker-popup; you can confirm this by selecting a date via the directive and seeing that the other input (outside of your directive) gets updated.

You can also move your directive's template (partials/my-datepicker.html) into its own file, rather than embedding it as a text/ng-template.

EDIT #2

As requested, below is an example using the ng-bootstrap-datepicker directive. Note the use of controller: ... instead of link: ... to set the datepickerOptions model; this is to make sure the update to our directive's scope is available when linking occurs (i.e. when the actual ng-bootstrap-datepicker directive is being initialized):

angular.module('myapp', ['ng-bootstrap-datepicker'])

.directive('myDatepicker', function() {
  return {
    restrict: 'E',
    template: '<input type="text" ng-datepicker ng-options="datepickerOptions" ng-model="date">',
    scope: {
      date: '='
    },
    controller: function($scope) {
      $scope.datepickerOptions = {
        format: 'yyyy-mm-dd',
        language: 'en',
        autoclose: true,
        weekStart: 0
      };
    }
  };
})

.controller('AppCtrl', ['$scope', function ($scope) {
  $scope.date = '2000-03-12'
}]);

angular.bootstrap(document, ['myapp']);
<link href="https://rawgit.com/cletourneau/angular-bootstrap-datepicker/master/dist/angular-bootstrap-datepicker.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/2.0.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="https://rawgithub.com/cletourneau/angular-bootstrap-datepicker/master/dist/angular-bootstrap-datepicker.js" charset="utf-8"></script>



<div ng-app="myapp" ng-controller="AppCtrl">
  <my-datepicker date="date"></my-datepicker>
  <input id="datepickerMirror" type="text" data-ng-model="date">
</div>

The angular-bootstrap-datepicker directive doesn't look to be compatible with the latest AngularJS/Bootstrap versions, so the example above uses the same from the OP's snippet.

Upvotes: 2

Related Questions