How to create a directive for this sample date picker?

Question

I'm new to angularjs, here I created a date picker that works great. I want to create a directive for this sample. I tried its work, but after the date that it shows is selected, the format is not determined ... for this sample I need a directive .. any of me will help me with 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>

Run code

Answer 1

( AngularJS Bootstrap), , my-datepicker, date uib-datepicker-popup.

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>

, date , ng-model uib-datepicker-popup; , , input ( ).

(partials/my-datepicker.html) , text/ng-template.

EDIT # 2

ng-bootstrap-datepicker. controller: ... link: ... datepickerOptions; , , (, ng-bootstrap-datepicker):

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>

angular-bootstrap-datepicker AngularJS/Bootstrap, OP.