popover-template directive example

index.html

<div class="main" ng-app="codepen" ng-controller="codepenCtrl">
  
  <p class="form-group">
    <input class="form-control" type="text" value="{{ date | date:'fullDate' }}" readonly>
  </p>
  
  <p class="form-group">
    <input class="form-control" type="text" ng-model="text">
  </p>
  
  <p>
    <button popover-placement="bottom" popover-template="calendar.html" popover-trigger="click" class="btn btn-default">Date Picker</button>
  </p>
  
  <script id="calendar.html" type="text/ng-template">
    <div id="tip">
      <datepicker ng-model="date" show-weeks="false"></datepicker>
      <hr />
      <div class="alert alert-success">{{ text }}</div>
    </div>
  </script>
  
</div>

popover-template directive example.markdown

popover-template directive example

Forked from J Bruni's Pen popover-template directive example.

Forked from Simon Mansfield's Pen popover-template directive example.

Forked from Simon Mansfield's Pen popover-template directive example.

Forked from Simon Mansfield's Pen popover-template directive example.

A Pen by Captain Anonymous on CodePen.

License.

script.js

angular.module('codepen', ['ui.bootstrap']);

var codepenCtrl = function ($scope) {
  $scope.date = new Date();
  $scope.text = 'Click a date to check the binding.';
  
  var trigger = $('button');
  
  function showTip() {
    if (! $('#tip').is(':visible')) {
      trigger.click();
    }
  }
  
  function hideTip() {
    if ($('#tip').is(':visible')) {
      trigger.click();
    }
  }
  
  trigger.mouseenter(showTip);
  
  $(document).on('mouseleave', '#tip', hideTip)
};

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="//jbruni.com.br/bootstrap-bower-jbruni/ui-bootstrap-tpls.min.js"></script>

style.css

div.main {
  padding: 2em;
  text-align: center;
  width: 50%;
  margin: auto;
}

styles

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />