Merge branch 'feature-disabled-months'

kunder-lab · Jul 6, 2016 · a40e5a6 · a40e5a6
2 parents dea80f6 + 4808cc1
commit a40e5a6
Show file tree

Hide file tree

Showing 12 changed files with 273 additions and 24 deletions.
diff --git a/demo/datepicker.html b/demo/datepicker.html
@@ -0,0 +1,19 @@
+<ion-view view-title="Date Picker">
+  <ion-content class="padding">
+
+    <div class="card padding">
+      <button class="button button-positive button-block" style="margin: 0;"
+              ng-click="openDatePickerOne()">Open Date Picker Popup
+      </button>
+      <div class="text-center padding-top" ng-if="selectedDate1">{{selectedDate1 | date:'longDate'}}</div>
+    </div>
+
+    <div class="card padding">
+      <button class="button button-positive button-block" style="margin: 0;"
+              ng-click="openDatePickerTwo()">Open Date Picker Modal
+      </button>
+      <div class="text-center padding-top" ng-if="selectedDate2">{{selectedDate2 | date:'longDate'}}</div>
+    </div>
+
+  </ion-content>
+</ion-view>
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,36 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
+  <title></title>
+    <!-- compiled css output -->
+  <link href="http://code.ionicframework.com/1.3.1/css/ionic.min.css" rel="stylesheet">
+
+  <!-- ionic/angularjs js -->
+  <script src="http://code.ionicframework.com/1.3.1/js/ionic.bundle.js"></script>
+  <script src="ionic-datepicker.bundle.min.js"></script>
+
+  <!-- cordova script (this will be a 404 during development) -->
+  <script src="cordova.js"></script>
+
+  <!-- your app's js -->
+  <script src="scripts.js"></script>
+</head>
+<body ng-app="starter">
+<!--
+  The nav bar that will be updated as we navigate between views.
+-->
+<ion-nav-bar class="bar-stable">
+  <ion-nav-back-button>
+  </ion-nav-back-button>
+</ion-nav-bar>
+<!--
+  The views will be rendered in the <ion-nav-view> directive below
+  Templates are in the /templates folder (but you could also
+  have templates inline in this html file if you'd like).
+-->
+<ion-nav-view></ion-nav-view>
+</body>
+</html>
diff --git a/demo/ionic-datepicker.bundle.min.js b/demo/ionic-datepicker.bundle.min.js
diff --git a/demo/scripts.js b/demo/scripts.js
@@ -0,0 +1,135 @@
+angular.module('starter', [
+  'ionic',
+  'ionic-datepicker',
+  'starter.controllers'
+]);
+
+angular.module('starter')
+
+  .config(function ($ionicConfigProvider, ionicDatePickerProvider) {
+
+    var datePickerObj = {
+      setLabel: 'Set',
+      todayLabel: 'Today',
+      closeLabel: 'Close',
+      mondayFirst: false,
+      inputDate: new Date(),
+      weeksList: ["S", "M", "T", "W", "T", "F", "S"],
+      monthsList: ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"],
+      templateType: 'popup',
+      showTodayButton: true,
+      dateFormat: 'dd MMM yyyy',
+      closeOnSelect: false,
+      disableWeekdays: [6],
+      from: new Date(2015, 8, 1),
+      to: new Date(2016, 1, 10)
+    };
+
+    ionicDatePickerProvider.configDatePicker(datePickerObj);
+
+    $ionicConfigProvider.tabs.position('bottom');
+
+  });
+
+angular.module('starter')
+
+	.run(function ($ionicPlatform) {
+		$ionicPlatform.ready(function () {
+		  // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
+		  // for form inputs)
+		  if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
+		    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
+		    cordova.plugins.Keyboard.disableScroll(true);
+
+		  }
+		  if (window.StatusBar) {
+		    // org.apache.cordova.statusbar required
+		    StatusBar.styleDefault();
+		  }
+		});
+	});
+
+angular.module('starter')
+
+  .config(function ($stateProvider, $urlRouterProvider) {
+
+    $stateProvider
+      .state('tab', {
+        url: '/tab',
+        abstract: true,
+        templateUrl: 'tabs.html'
+      })
+      .state('tab.home', {
+        url: '/home',
+        views: {
+          'tab-home': {
+            templateUrl: 'datepicker.html',
+            controller: 'HomeCtrl'
+          }
+        }
+      });
+
+    $urlRouterProvider.otherwise('/tab/home');
+
+  });
+
+angular.module('starter.controllers', [])
+
+  .controller('HomeCtrl', function ($scope, ionicDatePicker) {
+
+    $scope.selectedDate1;
+    $scope.selectedDate2;
+
+    $scope.openDatePickerOne = function (val) {
+      var ipObj1 = {
+        callback: function (val) {  //Mandatory
+          console.log('Return value from the datepicker popup is : ' + val, new Date(val));
+          $scope.selectedDate1 = new Date(val);
+        },
+        disabledDates: [
+          new Date(2016, 2, 16),
+          new Date(2015, 3, 16),
+          new Date(2015, 4, 16),
+          new Date(2015, 5, 16),
+          new Date('Wednesday, August 12, 2015'),
+          new Date("08-16-2016"),
+          new Date(1439676000000)
+        ],
+        from: new Date(2016, 6, 1),
+        to: new Date(2017, 1, 10),
+        inputDate: new Date(),
+        mondayFirst: true,
+        disableWeekdays: [0],
+        closeOnSelect: false,
+        templateType: 'popup'
+      };
+      ionicDatePicker.openDatePicker(ipObj1);
+    };
+
+    $scope.openDatePickerTwo = function (val) {
+      var ipObj1 = {
+        callback: function (val) {  //Mandatory
+          console.log('Return value from the datepicker modal is : ' + val, new Date(val));
+          $scope.selectedDate2 = new Date(val);
+        },
+        disabledDates: [
+          new Date(1437719836326),
+          new Date(2016, 1, 25),
+          new Date(2015, 7, 10),
+          new Date('Wednesday, August 12, 2015'),
+          new Date("08-14-2015"),
+          new Date(1439676000000),
+          new Date(1456511400000)
+        ],
+        from: new Date(2016, 6, 1),
+        to: new Date(2017, 1, 10),
+        inputDate: new Date(),
+        mondayFirst: true,
+        showTodayButton: false,
+        closeOnSelect: false,
+        templateType: 'modal'
+      };
+      ionicDatePicker.openDatePicker(ipObj1);
+    }
+  });
+
diff --git a/demo/tabs.html b/demo/tabs.html
@@ -0,0 +1,24 @@
+<!--
+Create tabs with an icon and label, using the tabs-positive style.
+Each tab's child <ion-nav-view> directive will have its own
+navigation history that also transitions its views in and out.
+-->
+<ion-tabs class="tabs-icon-top tabs-color-active-positive">
+
+  <!-- Dashboard Tab -->
+  <ion-tab title="Date Picker" icon-off="ion-ios-calendar-outline" icon-on="ion-ios-calendar" href="#/tab/home">
+    <ion-nav-view name="tab-home"></ion-nav-view>
+  </ion-tab>
+
+  <!-- Chats Tab -->
+  <ion-tab title="Other Plugins" icon-off="ion-ios-list-outline" icon-on="ion-ios-list" href="#/tab/list">
+    <ion-nav-view name="tab-list"></ion-nav-view>
+  </ion-tab>
+
+  <!-- Account Tab -->
+  <ion-tab title="Contact" icon-off="ion-ios-person-outline" icon-on="ion-ios-person" href="#/tab/contact">
+    <ion-nav-view name="tab-contact"></ion-nav-view>
+  </ion-tab>
+
+
+</ion-tabs>