seasonpickermodule

season picker

by merganser

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <div data-seasonpicker id="hellopicker">Hello</div>

JavaScript

var app = angular.module('seasonpickermodule', []);
       app.directive('seasonpicker', ['$document', '$compile', 
		function ($document, $compile) {
      'use strict';
      return {
        require: '?ngModel',
        restrict: 'A',
        link: function ($scope, elem, attrs, ngModel) {
          elem.html('');
            var
              target =elem,
              pickerid = attrs.id ? attrs.id : 			  
                Math.floor((1 + Math.random()) * 0x10000)
                .toString(16)
                .substring(1),
              placeholder = attrs.placeholder ? attrs.placeholder : 'Select ...',
              inputTemplate = '<input  '+
                                    'id="pickerInput_"'+pickerid +
                                    'type="text"  '+
                                    'role="button" '+
									'data-toggle="dropdown" '+
									'data-target="#" '+
                                    'value=placeholder '+
								'/>',
              template ='<div id="pickerDropdown_'+pickerid+'" class="dropdown" is-open="true" auto-close="disabled">'+
							inputTemplate +
							'<ul '+
								'id="pickerTabs_'+pickerid+'"'+
								'class="dropdown-menu" '+
								'role="menu" '+
								'aria-labelledby="pickerInput" '+
							'><li>'+

								'<!-- TABS -->'+
								'<ul class="nav nav-tabs">'+
									'<li class="active"><a href="#single_'+pickerid+'" data-toggle="tab" ng-click="navtabsclicked()">Single Month</a></li>'+
									'<li><a href="#multiple_'+pickerid+'" data-toggle="tab" ng-click="navtabsclicked()">Month Range</a></li>'+
									'<li><a href="#custom_'+pickerid+'" data-toggle="tab" ng-click="navtabsclicked()">Custom Range</a></li>'+
								'</ul>'+
								
								'<!-- TAB PANES -->'+
								'<div class="tab-content">'+
									'<div class="tab-pane active" id="single_'+pickerid+'">Single asdfasdfsda</div>'+
									'<div class="tab-pane" id="multiple_'+pickerid+'">Month asdfafas</div>'+
									'<div...