- Made 'showTodayButton' fully functional

- Added 'subTitleLabel' for templateType='popup' - Added 'reverseTheYears' as a possibility to set the sortorder of the years select list. - fixed bug rajeshwarpatlolla#88 - Because the datepicker service used to return a static list of years, the enabledDates(from and to) are now bound to these values if no other 'from' and/or 'to' dates are supplied. - Optimized javascript code
Mediapioniers · Oct 9, 2015 · d0649fa · d0649fa
1 parent 88d8c4d
commit d0649fa
Show file tree

Hide file tree

Showing 9 changed files with 229 additions and 163 deletions.
diff --git a/README.md b/README.md
@@ -59,7 +59,10 @@ angular.module('mainModuleName', ['ionic', 'ionic-datepicker']){
       to: new Date(2018, 8, 25),	//Optional
       callback: function (val) {	//Mandatory
         datePickerCallback(val);
-      }
+      },
+      subTitleLabel: 'SubTitle', //Optional
+      showTodayButton: true, //Optional
+      reverseTheYears: false, //Optional
     };
 ````
 
@@ -133,6 +136,12 @@ var datePickerCallback = function (val) {
   }
 };
 ````
+**s) subTitleLabel**(Optional) : The label for 'SubTitle' of the ionic-datepicker popup. Default value is an empty string.
+
+**t) showTodayButton**(Optional) : Set `false` if you do not wish to show the `Today` button. Default value is `true`.
+
+**u) reverseTheYears**(Optional) : Set `true` if you want the years in the select button to appear in reverse (descending) order. Default value is `false`.
+
 
 5) Then use the below format in your template / html file
 

diff --git a/bower.json b/bower.json
@@ -1,5 +1,5 @@
 {
-  "name": "ionic-datepicker-mbl",
+  "name": "ionic-datepicker",
   "version": "0.9.1",
   "authors": [
     "rajeshwarpatlolla <rajeshwar.patlolla@gmail.com>"

diff --git a/dist/ionic-datepicker.bundle.min.js b/dist/ionic-datepicker.bundle.min.js
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "ionic-datepicker-mbl",
+  "name": "ionic-datepicker",
   "version": "0.9.1",
   "description": "A date picker for IONIC framework",
   "main": [

diff --git a/src/ionic-datepicker-modal.html b/src/ionic-datepicker-modal.html
@@ -7,15 +7,14 @@ <h1 class="title">{{titleLabel}}</h1>
       <div class="selected_date_full">{{selectedDateFull | date:"dd-MM-yyyy"}}</div>
       <div class="row">
         <div class="col col-10 left_arrow" ng-click="prevMonth()"
-             ng-class="{'pointer_events_none':(enableDatesFrom.isSet && enableDatesFrom.epoch > currentMonthFirstDayEpoch)}">
-          <button class="button-clear font_22px"
-                  ng-class="{'color_blue':((enableDatesFrom.isSet && enableDatesFrom.epoch < currentMonthFirstDayEpoch) || (!enableDatesFrom.isSet))}">
-            <i class="icon ion-chevron-left"></i>
+             ng-class="{'pointer_events_none':(enableDatesFrom.epoch > currentMonthFirstDayEpoch)}">
+          <button class="button-clear font_22px">
+            <i class="icon ion-chevron-left" ng-class="{'color_blue':(enableDatesFrom.epoch < currentMonthFirstDayEpoch)}"></i>
           </button>
         </div>
         <div class="col col-80 drop_down">
           <div class="row select_section">
-            <div class="col col-50 month_dropdown">
+            <div class="col col-50 month_select">
               <div class="list">
                 <label class="item item-input item-select">
                   <select ng-model="currentMonth" ng-change="monthChanged(currentMonth)" class="month_select">
@@ -27,7 +26,7 @@ <h1 class="title">{{titleLabel}}</h1>
                 </label>
               </div>
             </div>
-            <div class="col col-50 year_dropdown">
+            <div class="col col-50 year_select">
               <div class="list">
                 <label class="item item-input item-select">
                   <select ng-model="currentYear" ng-change="yearChanged(currentYear)" class="year_select">
@@ -41,10 +40,9 @@ <h1 class="title">{{titleLabel}}</h1>
           </div>
         </div>
         <div class="col col-10 right_arrow" ng-click="nextMonth()"
-             ng-class="{'pointer_events_none':(enableDatesTo.isSet && enableDatesTo.epoch < currentMonthLastDayEpoch)}">
-          <button class="button-clear font_22px"
-                  ng-class="{'color_blue':((enableDatesTo.isSet && enableDatesTo.epoch > currentMonthLastDayEpoch) || (!enableDatesTo.isSet))}">
-            <i class="icon ion-chevron-right"></i>
+             ng-class="{'pointer_events_none':(enableDatesTo.epoch < currentMonthLastDayEpoch)}">
+          <button class="button-clear font_22px">
+            <i class="icon ion-chevron-right" ng-class="{'color_blue':(enableDatesTo.epoch > currentMonthLastDayEpoch)}"></i>
           </button>
         </div>
       </div>
@@ -60,7 +58,7 @@ <h1 class="title">{{titleLabel}}</h1>
       'date_selected': (dayList[$parent.$index * numColumns + $index].dateString === selctedDateStringCopy && dayList[$parent.$index * numColumns + $index].day != undefined) ,
       'today' : (dayList[$parent.$index * numColumns + $index].date == today.date && dayList[$parent.$index * numColumns + $index].month == today.month && dayList[$parent.$index * numColumns + $index].year == today.year)}">
               <div class="date_cell" ng-click="dateSelected(dayList[$parent.$index * numColumns + $index])"
-                   ng-class="{'pointer_events_none':(disabledDates.indexOf(dayList[$parent.$index * numColumns + $index].epochLocal) > -1) || (enableDatesFrom.isSet && enableDatesFrom.epoch > dayList[$parent.$index * numColumns + $index].epochLocal) || (enableDatesTo.isSet && enableDatesTo.epoch < dayList[$parent.$index * numColumns + $index].epochLocal)}">
+                   ng-class="{'pointer_events_none':(disabledDates.indexOf(dayList[$parent.$index * numColumns + $index].epochLocal) > -1) || (enableDatesFrom.epoch > dayList[$parent.$index * numColumns + $index].epochLocal) || (enableDatesTo.epoch < dayList[$parent.$index * numColumns + $index].epochLocal)}">
                 {{ dayList[$parent.$index * numColumns + $index].date }}
               </div>
             </div>
@@ -72,11 +70,17 @@ <h1 class="title">{{titleLabel}}</h1>
       </div>
     </div>
   </ion-content>
-  <ion-footer-bar  ng-class="modalFooterColor">
+  <ion-footer-bar ng-class="modalFooterColor">
     <div class="row no_padding">
-      <div class="text-center" ng-class="{'col-33': showTodayButton, 'col-50': !showTodayButton}" ng-click="closeIonicDatePickerModal()"><button class="button button-clear">{{closeLabel}}</button></div>
-      <div class="col-34 text-center ng-hide" ng-show="showTodayButton" ng-click="setIonicDatePickerTodayDate()"><button class="button button-clear">{{todayLabel}}</button></div>
-      <div class="text-center" ng-class="{'col-33': showTodayButton, 'col-50': !showTodayButton}" ng-click="setIonicDatePickerDate()"><button class="button button-clear">{{setLabel}}</button></div>
+      <div class="text-center" ng-class="{'col-33': showTodayButton, 'col-50': !showTodayButton}" ng-click="closeIonicDatePickerModal()">
+        <button class="button button-clear">{{closeLabel}}</button>
+      </div>
+      <div class="col-34 text-center ng-hide" ng-show="showTodayButton" ng-click="setIonicDatePickerTodayDate()">
+        <button class="button button-clear">{{todayLabel}}</button>
+      </div>
+      <div class="text-center" ng-class="{'col-33': showTodayButton, 'col-50': !showTodayButton}" ng-click="setIonicDatePickerDate()">
+        <button class="button button-clear">{{setLabel}}</button>
+      </div>
     </div>
   </ion-footer-bar>
 </ion-modal-view>
diff --git a/src/ionic-datepicker-popup.html b/src/ionic-datepicker-popup.html
@@ -2,15 +2,14 @@
   <div class="selected_date_full">{{selectedDateFull | date:"dd-MM-yyyy"}}</div>
   <div class="row no_padding">
     <div class="col col-10 left_arrow" ng-click="prevMonth()"
-         ng-class="{'pointer_events_none':(enableDatesFrom.isSet && enableDatesFrom.epoch > currentMonthFirstDayEpoch)}">
-      <button class="button-clear"
-              ng-class="{'color_blue':((enableDatesFrom.isSet && enableDatesFrom.epoch < currentMonthFirstDayEpoch) || (!enableDatesFrom.isSet))}">
-        <i class="icon ion-chevron-left"></i>
+         ng-class="{'pointer_events_none':(enableDatesFrom.epoch > currentMonthFirstDayEpoch)}">
+      <button class="button-clear">
+        <i class="icon ion-chevron-left" ng-class="{'color_blue':(enableDatesFrom.epoch < currentMonthFirstDayEpoch)}"></i>
       </button>
     </div>
     <div class="col col-80 drop_down no_padding">
       <div class="row select_section">
-        <div class="col col-50 month_dropdown">
+        <div class="col col-50 month_select">
           <div class="list">
             <label class="item item-input item-select">
               <select ng-model="currentMonth" ng-change="monthChanged(currentMonth)" class="month_select">
@@ -21,7 +20,7 @@
             </label>
           </div>
         </div>
-        <div class="col col-50 year_dropdown">
+        <div class="col col-50 year_select">
           <div class="list">
             <label class="item item-input item-select">
               <select ng-model="currentYear" ng-change="yearChanged(currentYear)" class="year_select">
@@ -35,10 +34,9 @@
       </div>
     </div>
     <div class="col col-10 right_arrow" ng-click="nextMonth()"
-         ng-class="{'pointer_events_none':(enableDatesTo.isSet && enableDatesTo.epoch < currentMonthLastDayEpoch)}">
-      <button class="button-clear"
-              ng-class="{'color_blue':((enableDatesTo.isSet && enableDatesTo.epoch > currentMonthLastDayEpoch) || (!enableDatesTo.isSet))}">
-        <i class="icon ion-chevron-right"></i>
+         ng-class="{'pointer_events_none':(enableDatesTo.epoch < currentMonthLastDayEpoch)}">
+      <button class="button-clear">
+        <i class="icon ion-chevron-right" ng-class="{'color_blue':(enableDatesTo.epoch > currentMonthLastDayEpoch)}"></i>
       </button>
     </div>
   </div>
@@ -53,7 +51,7 @@
       'date_selected': (dayList[$parent.$index * numColumns + $index].dateString === selctedDateStringCopy && dayList[$parent.$index * numColumns + $index].day != undefined) ,
       'today' : (dayList[$parent.$index * numColumns + $index].date == today.date && dayList[$parent.$index * numColumns + $index].month == today.month && dayList[$parent.$index * numColumns + $index].year == today.year)}">
           <div class="date_cell" ng-click="dateSelected(dayList[$parent.$index * numColumns + $index])"
-               ng-class="{'pointer_events_none':(disabledDates.indexOf(dayList[$parent.$index * numColumns + $index].epochLocal) > -1) || (enableDatesFrom.isSet && enableDatesFrom.epoch > dayList[$parent.$index * numColumns + $index].epochLocal) || (enableDatesTo.isSet && enableDatesTo.epoch < dayList[$parent.$index * numColumns + $index].epochLocal)}">
+               ng-class="{'pointer_events_none':(disabledDates.indexOf(dayList[$parent.$index * numColumns + $index].epochLocal) > -1) || (enableDatesFrom.epoch > dayList[$parent.$index * numColumns + $index].epochLocal) || (enableDatesTo.epoch < dayList[$parent.$index * numColumns + $index].epochLocal)}">
             {{ dayList[$parent.$index * numColumns + $index].date }}
           </div>
         </div>