Angular Date Range Selector

<html>

<head>
  <title>Simple UI-Router Menu (Simple Navigation)</title>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-animate.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-loader.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-sanitize.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-cookies.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-touch.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-resource.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui-ieshiv.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type='text/javascript' src="script.js"></script>
</head>

<body ng-app="myApp">
  <div ng-include="'menu.html'"></div>
  <div ui-view="main" class="container-fluid"></div>
  <script type="text/ng-template" id="menu.html">
    <nav class="navbar navbar-default" ng-controller="menuCtrl as mn">
      <div class="container-fluid">
        <div class="navbar-header">
          <span class="navbar-brand">Our Menu</span>
        </div>
        <div>
          <ul class="nav navbar-nav">
            <li ng-repeat="m in mn.menuItems track by $index" ng-class="{'active': m && m.active}">
              <a ng-href="{{ mn.getRouteSref(m) }}" ng-bind="m.heading" />
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </script>
  <script type="text/ng-template" id="modalSimple.html">
    <div class="modal-body">
      <h3>Changed states</h3>
      <p>You changed states.</p>
    </div>
    <div class="modal-footer">
      <button class="button primary" ng-click="ok()">Ok</button>
    </div>
  </script>
  <script type="text/ng-template" id="state1.html">
    <h4>Current Period {{ vm.options.minDate | date:'shortDate' }}, End: {{ vm.options.maxDate | date:'shortDate' }}</h4>
    <h5>Start: {{ vm.dt1 | date:'shortDate' }}, End: {{ vm.dt2 | date:'shortDate' }}</h5>
    <div style="display:inline-block; min-height:290px;">
      <div uib-datepicker ng-model="vm.dt" class="well well-sm" datepicker-options="vm.options" ng-change="vm.change()"></div>
    </div>
  </script>
  <script type="text/ng-template" id="state2.html">
    <div>
      <h4>Current Period {{ vm.options.minDate | date:'shortDate' }}, End: {{ vm.options.maxDate | date:'shortDate' }}</h4>
      <h5>Start: {{ vm.dt1 | date:'shortDate' }}, End: {{ vm.dt2 | date:'shortDate' }}</h5>
      <div style="display:inline-block; min-height:290px;">
        <div uib-datepicker ng-model="vm.date1" class="well well-sm" datepicker-options="vm.options1" ng-change="vm.change(vm.date1)"></div>
      </div>
      <div style="display:inline-block; min-height:290px;">
        <div uib-datepicker ng-model="vm.date2" class="well well-sm" datepicker-options="vm.options2" ng-change="vm.change(vm.date2)"></div>
      </div>
    </div>
  </script>
  <script type="text/ng-template" id="state3.html">
    <div>
      <h1>This is State 3</h1>
    </div>
  </script>
</body>

</html>

(function() {
  angular.module('myApp.services', ['ngResource', 'ngAnimate']);
  angular.module('myApp.controllers', []);

  var menuService = function($rootScope) {
    var menuItems = [{
      name: 'state1',
      heading: "Single Month",
      route: "app.state1",
      active: false
    }, {
      name: 'state2',
      heading: "Multi Month",
      route: "app.state2",
      active: false
    }, ];
    var
      currentMenuItem,
      resetMenuItem = function(menuItem) {
        menuItem.active = false;
      },
      resetMenuItems = function() {
        for (var i = 0; i < menuItems.length; i++) {
          resetMenuItem(menuItems[i]);
        }
      },
      findMenuItem = function(routeName) {
        var criteriaFunction = function(c) {
          return c.route === routeName || routeName.indexOf(c.route) != -1;
        };
        return menuItems.filter(criteriaFunction)[0];
      };

    $rootScope.$on('$stateChangeStart', function(event, toState, toParams) {
      currentMenuItem = findMenuItem(toState.name, toParams);
    });

    $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
      if (currentMenuItem) {
        currentMenuItem.active = true;
        prevMenuItem = findMenuItem(fromState.name);
        if (prevMenuItem && prevMenuItem.name !== currentMenuItem.name) {
          prevMenuItem.active = false;
        }
      } else {
        for (var i = 0; i < currentMenuItem.length; i++) {
          currentMenuItem[i].active = false;
        }
      }
    });

    return {
      menuItems: menuItems,
      currentMenuItem: currentMenuItem
    };
  };

  var menuController = function($state, menuService) {
    var vm = this;
    vm.menuItems = menuService.menuItems;

    vm.getRouteSref = function(menuItem) {
      if (!menuItem) {
        menuItem = vm.menuItems[0]
      }
      return $state.href(menuItem.route);
    };
  };

  menuService.$inject = ['$rootScope'];
  angular.module('myApp.services')
    .factory('menuService', menuService);

  menuController.$inject = ['$state', 'menuService'];
  angular
    .module('myApp.controllers')
    .controller('menuCtrl', menuController);

  var myApp = angular.module('myApp', [
    'myApp.services',
    'myApp.controllers',
    'ngSanitize',
    'ui.bootstrap',
    'ui.router',
    'ui'
  ]);

  var state1Controller = function($scope, $timeout) {
    var
      vm = this,
      selected = new Date(),
      tomorrow = new Date(),
      select = 0;

    vm.dt = null;

    vm.options = {
      customClass: getDayClass,
      minDate: new Date(2017, 2, 1),
      maxDate: new Date(2017, 2, 15),
      showWeeks: true
    };

    vm.change = function() {
      if (select === 0) {
        vm.dt2 = null;
        vm.dt1 = vm.dt;
      } else {
        vm.dt2 = vm.dt;

        if (vm.dt1 && vm.dt <= vm.dt1) {
          vm.dt2 = vm.dt1;
          vm.dt1 = vm.dt;
        }
      }
      select = (select + 1) % 2;
    }

    function getDayClass(data) {
      var date = data.date,
        mode = data.mode;

      if (vm.dt1 && date.getTime() == vm.dt1.getTime()) {
        return 'period active';
      }

      if (vm.dt2 && date >= vm.dt1 && date <= vm.dt2) {
        return 'period active';
      }

      if (date >= vm.options.minDate && date <= vm.options.maxDate) {
        return 'period';
      }
      return '';
    }
  };

  state1Controller.$inject = ['$scope', '$timeout'];
  angular.module('myApp.controllers')
    .controller('state1Controller', state1Controller);

  var state2Controller = function($scope, $timeout) {
    var
      vm = this,
      selected = new Date(),
      tomorrow = new Date(),
      select = 0;

    vm.dt = null;

    vm.options1 = {
      customClass: getDayClass,
      minDate: new Date(2017, 2, 1),
      maxDate: new Date(2017, 6, 31),
      showWeeks: true
    };
    
    vm.options2 = {
      customClass: getDayClass,
      minDate: new Date(2017, 2, 1),
      maxDate: new Date(2017, 6, 31),
      showWeeks: true
    };
    
    vm.change = function(inDate) {
      if (select === 0) {
        vm.dt2 = null;
        vm.dt1 = inDate;
      } else {
        vm.dt2 = inDate;

        if (vm.dt1 && inDate <= vm.dt1) {
          vm.dt2 = vm.dt1;
          vm.dt1 = inDate;
        }
      }
      select = (select + 1) % 2;
      
      // Set a property on the options to simply trigger a refresh
      //$timeout(function() {
        if (vm.dt1) { vm.date1 = new Date(vm.dt1); console.log("date1 set"); }
        if (vm.dt2) { vm.date2 = new Date(vm.dt2); } else { vm.date2 = null; }
      //  }, 1);
      }

    function getDayClass(data) {
      var
        date = data.date,
        mode = data.mode;

      if (vm.dt1 && date.getTime() == vm.dt1.getTime()) {
        return 'period active';
      }

      if (vm.dt2 && date >= vm.dt1 && date <= vm.dt2) {
        return 'period active';
      }

      if (date >= vm.options1.minDate && date <= vm.options1.maxDate) {
        return 'period';
      }
      return '';
    }
  };

  state2Controller.$inject = ['$scope', '$timeout'];
  angular.module('myApp.controllers')
    .controller('state2Controller', state2Controller);

  myApp.config(['$uibModalProvider', '$locationProvider', '$stateProvider', '$urlRouterProvider',
    function($modalProvider, $locationProvider, $stateProvider, $urlRouterProvider) {
      $modalProvider.options = {
        dialogFade: true,
        backdrop: 'static',
        keyboard: false
      };
      $locationProvider.html5Mode(false);

      $urlRouterProvider
        .when('/', '/state1')
        .otherwise("/state1");

      $stateProvider
        .state('app', {
          abstract: true,
          url: '/',
          views: {
            'main': {
              template: '<div ui-view>/div>'
            }
          }
        })
        .state('app.state1', {
          url: 'state1',
          templateUrl: 'state1.html',
          controller: 'state1Controller as vm',
          reloadOnSearch: false
        })
        .state('app.state2', {
          url: 'state2',
          templateUrl: 'state2.html',
          controller: 'state2Controller as vm',
          reloadOnSearch: false
        })
        .state('app.state3', {
          url: 'state3',
          templateUrl: 'state3.html',
          controller: function() {},
          reloadOnSearch: false
        })
    }
  ]);

  myApp.run(['$log', function($log) {
    $log.log("Start.");
  }]);
})()

multiselect {
    display: block;
}

    multiselect > .btn-group {
        min-width: 180px;
    }

    multiselect .btn {
        width: 100%;
        background-color: #FFF;
    }

        multiselect .btn.has-error {
            border: 1px solid #a94442 !important;
            color: #db524b;
        }

    multiselect .dropdown-menu {
        max-height: 300px;
        min-width: 200px;
        overflow-y: auto;
    }

        multiselect .dropdown-menu .filter > input {
            width: 99%;
        }

        multiselect .dropdown-menu .filter .glyphicon {
            cursor: pointer;
            pointer-events: all;
        }

    multiselect .dropdown-menu {
        width: 100%;
        box-sizing: border-box;
        padding: 2px;
    }

    multiselect > .btn-group > button {
        padding-right: 20px;
    }

        multiselect > .btn-group > button > .caret {
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid black;
            right: 5px;
            top: 45%;
            position: absolute;
        }

    multiselect .dropdown-menu > li > a {
        padding: 3px 10px;
        cursor: pointer;
    }

        multiselect .dropdown-menu > li > a i {
            margin-right: 4px;
        }

.glyphicon-none:before {
    content: "\e013";
    color: transparent !important;
}


  .period button {
     background-color: #6495ed;
  }
  
  .period.active button {
  color: #fff;
    background-color: #31b0d5;
    border-color: #269abc;
  }

# Angular Date Range Selector

This is a simple date range selector

### Links
  - [Blog](https://long2know.com/2017/03/angular-date-range-selector/)