directive month day picker BUTTON

For month summary view.

by merganser

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>

  <div ng-controller="DropdownCtrl">
  
  <seasonpicker id="test">hello</seasonpicker>



<!-- Split button -->
    <div class="btn-group" uib-dropdown>
      <button id="split-button" type="button" class="btn btn-danger">Action</button>
      <button type="button" class="btn btn-danger" uib-dropdown-toggle>
        <span class="caret"></span>
        <span class="sr-only">Split button!</span>
      </button>
      <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="split-button">
        <li role="menuitem"><a href="#">Action</a></li>
        <li role="menuitem"><a href="#">Another action</a></li>
        <li role="menuitem"><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li role="menuitem"><a href="#">Separated link</a></li>
      </ul>
    </div>
    
</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('DropdownCtrl', function ($scope, $log) {});


myApp
    .directive('seasonpicker', ['$document', '$compile', 
		function ($document, $compile) {
		    'use strict';
		    return {
		        require: '?ngModel',
		        restrict: 'E',
		        link: function ($scope, elem, attrs, ngModel) {
        
		            elem.html('');
         
		            var
                         pickerid = attrs.id ? attrs.id : 			  
                               Math.floor((1 + Math.random()) * 0x10000)
                               .toString(16)
                               .substring(1),
                         placeholder = attrs.placeholder ? attrs.placeholder : 'Select Season...',
              
                         template =''+
           '<div '+
               'class="btn-group" '+
               'uib-dropdown '+
               'auto-close="outsideClick" '+
           '>'+
               '<button '+
                   'id="pickerbutton" '+
                   'type="button" '+
                   'class="btn btn-primary" '+
                   'uib-dropdown-toggle '+
               '>'+
                   'Dropdown using Button <span class="caret"></span>'+
               '</button>'+

           '<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="pickerbutton">'+
           '<li role="menuitem"><a href="#">Action</a></li>'+
           '<li role="menuitem"><a href="#">Another action</a></li>'+
           '<li role="menuitem"><a href="#">Something else here</a></li>'+
           '<li class="divider"></li>'+
           '<li role="menuitem"><a href="#">Separated link</a></li>'+
           '</ul>'+
           '</div>';
			  
                         var seasonpickerTemplate = angular.element(template);
             
                       $compile(seasonpickerTemplate)($scope);
          
			
		  

		            elem.append(seasonpickerTemplate);

		            if (ngModel) {
		      ...