From 4e6da5b44a0b18fef3e978940cbc27232d133947 Mon Sep 17 00:00:00 2001
From: Barbara Post <bpo@eonix.be>
Date: Wed, 7 Jun 2017 13:19:44 +0200
Subject: [PATCH] Working on #7: fixed the selected month in dropdown. Last
 thing to do : fix code when dropdown selection changes :-)

---
 dist/ionic-datepicker.bundle.min.js |  2 +-
 src/ionic-datepicker-modal.html     |  1 -
 src/ionic-datepicker-popup.html     |  3 +--
 src/ionic-datepicker.provider.js    | 17 +++++++++++++----
 src/ionic-datepicker.service.js     |  1 -
 5 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/dist/ionic-datepicker.bundle.min.js b/dist/ionic-datepicker.bundle.min.js
index e1b1859..32aac1a 100755
--- a/dist/ionic-datepicker.bundle.min.js
+++ b/dist/ionic-datepicker.bundle.min.js
@@ -1 +1 @@
-!function(e,t){var n=e.createElement("style");if(e.getElementsByTagName("head")[0].appendChild(n),n.styleSheet)n.styleSheet.disabled||(n.styleSheet.cssText=t);else try{n.innerHTML=t}catch(e){n.innerText=t}}(document,"/**/\n.padding_zero {\n    padding: 0;\n}\n\n.ionic_datepicker_popup .font_bold {\n    font-weight: bold;\n}\n\n.ionic_datepicker_popup .padding_top_zero {\n    padding-top: 0;\n}\n\n.ionic_datepicker_popup .padding_left_5px {\n    padding-left: 5px;\n}\n\n.ionic_datepicker_popup .padding_right_5px {\n    padding-right: 5px;\n}\n\n.ionic_datepicker_popup .month_year_section {\n    padding: 5px 0;\n}\n\n.ionic_datepicker_popup .calendar_grid {\n    height: 215px;\n}\n\n.ionic_datepicker_popup .calendar_grid .weeks_row {\n    padding: 0;\n}\n\n.ionic_datepicker_popup .today {\n    border: 1px solid #009688;\n    border-radius: 50%;\n}\n\n.ionic_datepicker_popup .selected_date {\n    background-color: #009688;\n    border-radius: 50%;\n    color: #ffffff;\n    font-weight: bold;\n}\n\n.ionic_datepicker_popup .popup-head {\n    background-color: #009688;\n    display: none;\n}\n\n.ionic_datepicker_popup .popup-head .popup-title {\n    color: #ffffff;\n}\n\n.ionic_datepicker_popup .popup-head .popup-sub-title {\n    color: #ffffff;\n}\n\n.ionic_datepicker_popup .popup-body {\n    background-color: #ffffff;\n}\n\n.ionic_datepicker_popup .popup-body .selected_date_full {\n    background-color: #009688;\n    margin: -10px -10px 0 -10px;\n    height: 45px;\n    text-align: center;\n    font-weight: bold;\n    color: #ffffff;\n    line-height: 45px;\n    font-size: 18px;\n}\n\n.ionic_datepicker_popup .popup-body .select_section {\n    padding: 1px 5px;\n}\n\n.ionic_datepicker_popup .popup-body .pointer_events_none {\n    pointer-events: none;\n    color: #aaaaaa !important;\n}\n\n.ionic_datepicker_popup .popup-body .month_select, .ionic_datepicker_popup .popup-body .year_select {\n    border: none;\n    border-bottom: 1px solid #009688;\n    padding: 0;\n}\n\n.ionic_datepicker_popup .popup-body .month_select .input-label, .ionic_datepicker_popup .popup-body .year_select .input-label {\n    padding: 2px 0;\n    width: 0;\n}\n\n.ionic_datepicker_popup .popup-body .month_select select, .ionic_datepicker_popup .popup-body .year_select select {\n    left: 10px;\n    border: none;\n    padding: 0;\n}\n\n.ionic_datepicker_popup .popup-body .month_select:after, .ionic_datepicker_popup .popup-body .year_select:after {\n    right: 5px;\n    color: #009688;\n}\n\n.ionic_datepicker_popup .popup-body .show_nav {\n    padding: 5px 0 0 0;\n}\n\n.ionic_datepicker_popup .popup-body .show_nav .prev_btn_section {\n    padding: 5px 0;\n    text-align: left;\n}\n\n.ionic_datepicker_popup .popup-body .show_nav .prev_btn_section button {\n    padding: 0;\n}\n\n.ionic_datepicker_popup .popup-body .show_nav .next_btn_section {\n    padding: 5px 0;\n    text-align: right;\n}\n\n.ionic_datepicker_popup .popup-body .show_nav .next_btn_section button {\n    padding: 0;\n}\n\n.ionic_datepicker_popup .popup-body .button-clear {\n    color: #009688;\n}\n\n.ionic_datepicker_popup .popup-buttons {\n    padding: 0;\n    min-height: 45px;\n}\n\n.ionic_datepicker_popup .popup-buttons button {\n    background-color: #009688;\n    border-radius: 0;\n    margin-right: 1px;\n    color: #ffffff;\n}\n\n.ionic_datepicker_popup .row + .row {\n    padding: 0;\n}\n\n.ionic_datepicker_modal .header, .ionic_datepicker_modal .footer {\n    background-color: #009688;\n}\n\n.ionic_datepicker_modal .header .title, .ionic_datepicker_modal .header .button, .ionic_datepicker_modal .footer .title, .ionic_datepicker_modal .footer .button {\n    color: #ffffff;\n}\n\n.ionic_datepicker_modal .footer .button-block {\n    margin: 0;\n}\n\n.ionic_datepicker_modal .today {\n    border: 1px solid #009688;\n}\n\n.ionic_datepicker_modal .selected_date {\n    background-color: #009688;\n    color: #ffffff;\n    font-weight: bold;\n}\n\n.ionic_datepicker_modal .pointer_events_none {\n    pointer-events: none;\n    color: #aaaaaa !important;\n}\n\n.ionic_datepicker_modal .select_section {\n    padding: 1px 5px;\n}\n\n.ionic_datepicker_modal .button-clear {\n    color: #009688;\n}\n\n.ionic_datepicker_modal .month_select, .ionic_datepicker_modal .year_select {\n    border: none;\n    border-bottom: 1px solid #009688;\n    padding: 0;\n}\n\n.ionic_datepicker_modal .month_select .input-label, .ionic_datepicker_modal .year_select .input-label {\n    padding: 2px 0;\n    width: 0;\n}\n\n.ionic_datepicker_modal .month_select select, .ionic_datepicker_modal .year_select select {\n    left: 10px;\n    border: none;\n    padding: 0 10px;\n}\n\n.ionic_datepicker_modal .month_select:after, .ionic_datepicker_modal .year_select:after {\n    right: 5px;\n    color: #009688;\n}\n\n.ionic_datepicker_modal .padding_left_5px {\n    padding-left: 5px;\n}\n\n.ionic_datepicker_modal .padding_right_5px {\n    padding-right: 5px;\n}\n\n.ionic_datepicker_modal .date_col {\n    height: 50px;\n    line-height: 50px;\n}\n\n.ionic_datepicker_modal .font_bold {\n    font-weight: bold;\n}\n\n.ionic_datepicker_modal .font_22px {\n    font-size: 22px;\n}\n\n.platform-android .ionic_datepicker_modal .bar .title.title-left {\n    text-align: center;\n}\n\n.platform-android .ionic_datepicker_modal select {\n    left: 25%;\n}\n\n.platform-ios .ionic_datepicker_modal select {\n    left: 5%;\n}\n\n.date_col {\n    cursor: pointer;\n}"),function(e){try{e=angular.module("ionic-datepicker.templates")}catch(t){e=angular.module("ionic-datepicker.templates",[])}e.run(["$templateCache",function(e){e.put("ionic-datepicker-modal.html",'<ion-modal-view class=ionic_datepicker_modal><ion-header-bar class=header><h1 class=title>{{mainObj.titleLabel || selctedDateEpoch | date : mainObj.dateFormat}}</h1></ion-header-bar><ion-content class=ionic_datepicker_modal_content><div><div class="row text-center"><div class="col col-10 left_arrow" ng-click=prevMonth()><button class="button-clear font_22px" ng-class="{\'pointer_events_none\':((firstDayEpoch - 86400000) < fromDate)}"><i class="icon ion-chevron-left"></i></button></div><div class="col col-80 text-center"><div class="row select_section"><div class="col col-50 padding_right_5px"><label class="item item-input item-select month_select"><span class=input-label>&nbsp;</span><select ng-model=data.currentMonth ng-options="select as item.text for item in monthsList track by item.value" ng-change=monthChanged(data.currentMonth)>{{month}}</select></label></div><div class="col col-50 padding_left_5px"><label class="item item-input item-select year_select"><span class=input-label>&nbsp;</span><select ng-model=data.currentYear ng-change=yearChanged(data.currentYear) ng-options="year for year in yearsList"></select></label></div></div></div><div class="col col-10 right_arrow" ng-click=nextMonth()><button class="button-clear font_22px" ng-class="{\'pointer_events_none\':((lastDayEpoch + 86400000)> toDate)}"><i class="icon ion-chevron-right"></i></button></div></div><div class=calendar_grid><div class="row padding-top weeks_row"><div class="col text-center font_bold" ng-repeat="weekName in weeksList track by $index" ng-bind=weekName></div></div><div><div class="row text-center padding_top_zero" ng-repeat="row in rows track by $index"><div class="col padding_zero date_col" ng-repeat="col in cols track by $index" ng-class="{\'selected_date\': ((mainObj.selectMode === \'day\' && dayList[row + $index].epoch === selctedDateEpoch) || (mainObj.selectMode !== \'day\' && dayList[row + $index].epoch >= selctedDateEpoch && dayList[row + $index].epoch <= selctedDateEpochEndWeek)), \'today\' : (dayList[row + $index].epoch == today), \'pointer_events_none\':((disabledDates.indexOf(dayList[row + $index].epoch) >= 0) || (dayList[row + $index].disabled))}" ng-click="dateSelected(dayList[row + $index])"><div class=date_cell>{{dayList[row + col].date}}</div></div></div></div></div></div></ion-content><ion-footer-bar class=footer><div class="row padding_zero"><button class="button button-clear button-block button_close" ng-click=closeIonicDatePickerModal()>{{mainObj.closeLabel}}</button> <button class="button button-clear button-block button_today" ng-if=mainObj.showTodayButton ng-click=setIonicDatePickerTodayDate()>{{mainObj.todayLabel}}</button> <button class="button button-clear button-block button_set" ng-if=!mainObj.closeOnSelect ng-click=setIonicDatePickerDate()>{{mainObj.setLabel}}</button></div></ion-footer-bar></ion-modal-view>')}])}(),function(e){try{e=angular.module("ionic-datepicker.templates")}catch(t){e=angular.module("ionic-datepicker.templates",[])}e.run(["$templateCache",function(e){e.put("ionic-datepicker-popup.html",'<div class=selected_date_full>{{mainObj.titleLabel || selctedDateEpoch | date : mainObj.dateFormat}}</div><div class=date_selection><div class="row show_nav"><div class="col col-10 prev_btn_section col-center" ng-click=prevMonth()><button class=button-clear ng-class="{\'pointer_events_none\':((firstDayEpoch - 86400000) < fromDate)}"><i class="icon ion-chevron-left"></i></button></div><div class="col col-80 month_year_section text-center"><div class="row select_section"><div class="col col-50 padding_right_5px"><label class="item item-input item-select month_select"><span class=input-label>&nbsp;</span><select ng-model=data.currentMonth ng-change=monthChanged(data.currentMonth)><option ng-repeat="month in monthsList" ng-selected="month==data.currentMonthSelected" value={{month}}>{{month}}</option></select></label></div><div class="col col-50 padding_left_5px"><label class="item item-input item-select year_select"><span class=input-label>&nbsp;</span><select ng-model=data.currentYear ng-change=yearChanged(data.currentYear) ng-options="year for year in yearsList"></select></label></div></div></div><div class="col col-10 next_btn_section col-center" ng-click=nextMonth()><button class=button-clear ng-class="{\'pointer_events_none\':((lastDayEpoch + 86400000)> toDate)}"><i class="icon ion-chevron-right"></i></button></div></div><div class=calendar_grid><div class="row weeks_row"><div class="col text-center font_bold" ng-repeat="weekName in weeksList track by $index" ng-bind=weekName></div></div><div><div class="row text-center padding_zero" ng-repeat="row in rows track by $index"><div class="col no_padding date_col" ng-repeat="col in cols track by $index" ng-class="{\'selected_date\': ((mainObj.selectMode === \'day\' && dayList[row + $index].epoch === selctedDateEpoch) || (mainObj.selectMode !== \'day\' && dayList[row + $index].epoch >= selctedDateEpoch && dayList[row + $index].epoch <= selctedDateEpochEndWeek)), \'today\' : (dayList[row + $index].epoch == today), \'pointer_events_none\':((disabledDates.indexOf(dayList[row + $index].epoch) >= 0) || dayList[row + $index].disabled)}" ng-click="dateSelected(dayList[row + $index])"><div class=date_cell>{{dayList[row + col].date}}</div></div></div></div></div></div>')}])}(),angular.module("ionic-datepicker",["ionic","ionic-datepicker.service","ionic-datepicker.provider","ionic-datepicker.templates"]),angular.module("ionic-datepicker.provider",[]).provider("ionicDatePicker",function(){var e={titleLabel:null,setLabel:"Set",todayLabel:"Today",closeLabel:"Close",inputDate:new Date,mondayFirst:!0,weeksList:["S","M","T","W","T","F","S"],monthsList:["Jan","Feb","March","April","May","June","July","Aug","Sept","Oct","Nov","Dec"],templateType:"popup",showTodayButton:!1,closeOnSelect:!1,disableWeekdays:[],selectMode:"day"};this.configDatePicker=function(t){angular.extend(e,t)},this.$get=["$rootScope","$ionicPopup","$ionicModal","IonicDatepickerService",function(t,n,a,o){function i(e){return e.setHours(0),e.setMinutes(0),e.setSeconds(0),e.setMilliseconds(0),e}function c(e){e.disabledDates&&0!==e.disabledDates.length?(u.disabledDates=[],angular.forEach(e.disabledDates,function(e,t){e=i(new Date(e)),u.disabledDates.push(e.getTime())})):u.disabledDates=[]}function d(e){e=i(e),u.currentDate=angular.copy(e);var t=new Date(e.getFullYear(),e.getMonth(),1).getDate(),n=new Date(e.getFullYear(),e.getMonth()+1,0).getDate();u.monthsNames=o.getMonthsNames(u.mainObj.monthsList),u.monthsList=o.getMonthsList(u.monthsNames,u.mainObj.from,u.mainObj.to),u.yearsList=o.getYearsList(u.mainObj.from,u.mainObj.to),u.dayList=[];var a,c;u.firstDayEpoch=i(new Date(e.getFullYear(),e.getMonth(),t)).getTime(),u.lastDayEpoch=i(new Date(e.getFullYear(),e.getMonth(),n)).getTime();for(var d=t;d<=n;d++)a=new Date(e.getFullYear(),e.getMonth(),d),c=a.getTime()<u.fromDate||a.getTime()>u.toDate||u.mainObj.disableWeekdays.indexOf(a.getDay())>=0,u.dayList.push({date:a.getDate(),month:a.getMonth(),year:a.getFullYear(),day:a.getDay(),epoch:a.getTime(),disabled:c});var l=u.dayList[0].day-u.mainObj.mondayFirst;l=l<0?6:l;for(var r=0;r<l;r++)u.dayList.unshift({});u.rows=[0,7,14,21,28,35],u.cols=[0,1,2,3,4,5,6],u.data.currentMonth=u.monthsNames[e.getMonth()],u.data.currentYear=e.getFullYear(),u.data.currentMonthSelected=angular.copy(u.data.currentMonth),u.currentYearSelected=angular.copy(u.data.currentYear),u.numColumns=7}function l(e){u.mainObj=angular.copy(e),u.mainObj.inputDate=i(u.mainObj.inputDate),u.adjustSelctedDateEpoch(u.mainObj.inputDate,!0),u.mainObj.weeksList&&7===u.mainObj.weeksList.length?u.weeksList=u.mainObj.weeksList:u.weeksList=["S","M","T","W","T","F","S"],u.mainObj.mondayFirst&&u.weeksList.push(u.mainObj.weeksList.shift()),u.disableWeekdays=u.mainObj.disableWeekdays,d(u.mainObj.inputDate),c(u.mainObj)}function r(){u.modal.show()}function p(){u.modal.hide()}var s={},u=t.$new();u.today=i(new Date).getTime(),u.disabledDates=[],u.data={},u.prevMonth=function(){var e=new Date(u.selctedDateEpoch),t=g(e.getDate(),e.getMonth()-1,e.getFullYear()-(0==e.getMonth()?1:0)),n=i(new Date(u.currentDate.getFullYear(),u.currentDate.getMonth()-1,t)),a=new Date(u.fromDate);n.getFullYear()<a.getFullYear()||n.getFullYear()==a.getFullYear()&&n.getMonth()<a.getMonth()||(n.getFullYear()==a.getFullYear()&&n.getMonth()==a.getMonth()&&n.getDate()<a.getDate()&&n.setDate(a.getDate()),u.currentDate=n,u.data.currentMonth=u.monthsNames[u.currentDate.getMonth()],u.data.currentYear=u.currentDate.getFullYear(),u.adjustSelctedDateEpoch(u.currentDate,!0),d(u.currentDate))},u.nextMonth=function(){var e=new Date(u.selctedDateEpoch),t=g(e.getDate(),e.getMonth()+1,e.getFullYear()+(11==e.getMonth()?1:0)),n=i(new Date(u.currentDate.getFullYear(),u.currentDate.getMonth()+1,t)),a=new Date(u.toDate);n.getFullYear()>a.getFullYear()||n.getFullYear()==a.getFullYear()&&n.getMonth()>a.getMonth()||(n.getFullYear()==a.getFullYear()&&n.getMonth()==a.getMonth()&&n.getDate()>a.getDate()&&n.setDate(a.getDate()),u.currentDate=n,u.data.currentMonth=u.monthsNames[u.currentDate.getMonth()],u.data.currentYear=u.currentDate.getFullYear(),u.adjustSelctedDateEpoch(u.currentDate,!0),d(u.currentDate))};var g=function(e,t,n){var a=new Date(n,t+1,0).getDate();return e>a&&(e=a),e};return u.dateSelected=function(e){e&&0!==Object.keys(e).length&&(u.adjustSelctedDateEpoch(e,!1),u.mainObj.closeOnSelect&&(u.mainObj.callback("day"==u.mainObj.selectMode?u.selctedDateEpoch:{start:u.selctedDateEpoch,end:u.selctedDateEpochEndWeek}),"popup"==u.mainObj.templateType.toLowerCase()?u.popup.close():p()))},u.setIonicDatePickerTodayDate=function(){var e=i(new Date);u.adjustSelctedDateEpoch(e,!0),d(e)},u.setIonicDatePickerDate=function(){u.mainObj.callback("day"==u.mainObj.selectMode?u.selctedDateEpoch:{start:u.selctedDateEpoch,end:u.selctedDateEpochEndWeek}),p()},u.adjustSelctedDateEpoch=function(e,t){var n,a=t?e.getTime():e.epoch;if("week"==u.mainObj.selectMode)n=new Date(a),u.mainObj.mondayFirst?n.setDate(n.getDate()-new Date(a).getDay()+1):n.setDate(n.getDate()-new Date(a).getDay()),a=n.getTime(),n.setDate(n.getDate()+6),u.selctedDateEpochEndWeek=n.getTime();else if("month"==u.mainObj.selectMode){n=new Date(a),n.setDate(1),a=n.getTime();var o=new Date(n.getYear(),n.getMonth()+1,0).getDate();n=new Date(n.getFullYear(),n.getMonth(),o),u.selctedDateEpochEndWeek=n.getTime()}u.selctedDateEpoch=a},u.monthChanged=function(e){var t=u.monthsNames.indexOf(e),n=new Date(u.selctedDateEpoch),a=g(n.getDate(),t,n.getFullYear());u.currentDate=i(new Date(u.currentDate.getFullYear(),t,a)),u.adjustSelctedDateEpoch(u.currentDate,!0),d(u.currentDate)},u.yearChanged=function(e){var t=new Date(u.selctedDateEpoch),n=g(t.getDate(),t.getMonth(),e);u.currentDate=i(new Date(e,u.currentDate.getMonth(),n)),u.adjustSelctedDateEpoch(u.currentDate,!0),d(u.currentDate)},a.fromTemplateUrl("ionic-datepicker-modal.html",{scope:u,animation:"slide-in-up"}).then(function(e){u.modal=e}),u.$on("$destroy",function(){u.modal.remove()}),u.closeIonicDatePickerModal=function(){p()},s.openDatePicker=function(t){var a=[];delete u.fromDate,delete u.toDate,u.mainObj=angular.extend({},e,t),u.mainObj.from&&(u.fromDate=i(new Date(u.mainObj.from)).getTime()),u.mainObj.to&&(u.toDate=i(new Date(u.mainObj.to)).getTime()),t.disableWeekdays&&e.disableWeekdays&&(u.mainObj.disableWeekdays=t.disableWeekdays.concat(e.disableWeekdays)),l(u.mainObj),a=[{text:u.mainObj.closeLabel,type:"button_close",onTap:function(e){console.log("ionic-datepicker popup closed.")}}],u.mainObj.showTodayButton&&a.push({text:u.mainObj.todayLabel,type:"button_today",onTap:function(e){var t=i(new Date);u.adjustSelctedDateEpoch(t,!0),d(t),e.preventDefault()}}),u.mainObj.closeOnSelect||a.push({text:u.mainObj.setLabel,type:"button_set",onTap:function(e){u.mainObj.callback("day"==u.mainObj.selectMode?u.selctedDateEpoch:{start:u.selctedDateEpoch,end:u.selctedDateEpochEndWeek})}}),"popup"==u.mainObj.templateType.toLowerCase()?u.popup=n.show({templateUrl:"ionic-datepicker-popup.html",scope:u,cssClass:"ionic_datepicker_popup",buttons:a}):r()},s}]}),angular.module("ionic-datepicker.service",[]).service("IonicDatepickerService",function(){this.getYearsList=function(e,t){var n=[],a=1900,o=2100;a=e?new Date(e).getFullYear():a,o=t?new Date(t).getFullYear():o;for(var i=a;i<=o;i++)n.push(i);return n},this.getMonthsList=function(e,t,n){var a=[],o=0,i=11;o=t?new Date(t).getMonth():o,i=n?new Date(n).getMonth():i;for(var c=0;c<=11;c++)c>=o&&c<=i&&a.push({value:c,text:e[c]});return a},this.getMonthsNames=function(e){return e&&12===e.length?e:["January","February","March","April","May","June","July","August","September","October","November","December"]}});
\ No newline at end of file
+!function(e,t){var n=e.createElement("style");if(e.getElementsByTagName("head")[0].appendChild(n),n.styleSheet)n.styleSheet.disabled||(n.styleSheet.cssText=t);else try{n.innerHTML=t}catch(e){n.innerText=t}}(document,"/**/\n.padding_zero {\n    padding: 0;\n}\n\n.ionic_datepicker_popup .font_bold {\n    font-weight: bold;\n}\n\n.ionic_datepicker_popup .padding_top_zero {\n    padding-top: 0;\n}\n\n.ionic_datepicker_popup .padding_left_5px {\n    padding-left: 5px;\n}\n\n.ionic_datepicker_popup .padding_right_5px {\n    padding-right: 5px;\n}\n\n.ionic_datepicker_popup .month_year_section {\n    padding: 5px 0;\n}\n\n.ionic_datepicker_popup .calendar_grid {\n    height: 215px;\n}\n\n.ionic_datepicker_popup .calendar_grid .weeks_row {\n    padding: 0;\n}\n\n.ionic_datepicker_popup .today {\n    border: 1px solid #009688;\n    border-radius: 50%;\n}\n\n.ionic_datepicker_popup .selected_date {\n    background-color: #009688;\n    border-radius: 50%;\n    color: #ffffff;\n    font-weight: bold;\n}\n\n.ionic_datepicker_popup .popup-head {\n    background-color: #009688;\n    display: none;\n}\n\n.ionic_datepicker_popup .popup-head .popup-title {\n    color: #ffffff;\n}\n\n.ionic_datepicker_popup .popup-head .popup-sub-title {\n    color: #ffffff;\n}\n\n.ionic_datepicker_popup .popup-body {\n    background-color: #ffffff;\n}\n\n.ionic_datepicker_popup .popup-body .selected_date_full {\n    background-color: #009688;\n    margin: -10px -10px 0 -10px;\n    height: 45px;\n    text-align: center;\n    font-weight: bold;\n    color: #ffffff;\n    line-height: 45px;\n    font-size: 18px;\n}\n\n.ionic_datepicker_popup .popup-body .select_section {\n    padding: 1px 5px;\n}\n\n.ionic_datepicker_popup .popup-body .pointer_events_none {\n    pointer-events: none;\n    color: #aaaaaa !important;\n}\n\n.ionic_datepicker_popup .popup-body .month_select, .ionic_datepicker_popup .popup-body .year_select {\n    border: none;\n    border-bottom: 1px solid #009688;\n    padding: 0;\n}\n\n.ionic_datepicker_popup .popup-body .month_select .input-label, .ionic_datepicker_popup .popup-body .year_select .input-label {\n    padding: 2px 0;\n    width: 0;\n}\n\n.ionic_datepicker_popup .popup-body .month_select select, .ionic_datepicker_popup .popup-body .year_select select {\n    left: 10px;\n    border: none;\n    padding: 0;\n}\n\n.ionic_datepicker_popup .popup-body .month_select:after, .ionic_datepicker_popup .popup-body .year_select:after {\n    right: 5px;\n    color: #009688;\n}\n\n.ionic_datepicker_popup .popup-body .show_nav {\n    padding: 5px 0 0 0;\n}\n\n.ionic_datepicker_popup .popup-body .show_nav .prev_btn_section {\n    padding: 5px 0;\n    text-align: left;\n}\n\n.ionic_datepicker_popup .popup-body .show_nav .prev_btn_section button {\n    padding: 0;\n}\n\n.ionic_datepicker_popup .popup-body .show_nav .next_btn_section {\n    padding: 5px 0;\n    text-align: right;\n}\n\n.ionic_datepicker_popup .popup-body .show_nav .next_btn_section button {\n    padding: 0;\n}\n\n.ionic_datepicker_popup .popup-body .button-clear {\n    color: #009688;\n}\n\n.ionic_datepicker_popup .popup-buttons {\n    padding: 0;\n    min-height: 45px;\n}\n\n.ionic_datepicker_popup .popup-buttons button {\n    background-color: #009688;\n    border-radius: 0;\n    margin-right: 1px;\n    color: #ffffff;\n}\n\n.ionic_datepicker_popup .row + .row {\n    padding: 0;\n}\n\n.ionic_datepicker_modal .header, .ionic_datepicker_modal .footer {\n    background-color: #009688;\n}\n\n.ionic_datepicker_modal .header .title, .ionic_datepicker_modal .header .button, .ionic_datepicker_modal .footer .title, .ionic_datepicker_modal .footer .button {\n    color: #ffffff;\n}\n\n.ionic_datepicker_modal .footer .button-block {\n    margin: 0;\n}\n\n.ionic_datepicker_modal .today {\n    border: 1px solid #009688;\n}\n\n.ionic_datepicker_modal .selected_date {\n    background-color: #009688;\n    color: #ffffff;\n    font-weight: bold;\n}\n\n.ionic_datepicker_modal .pointer_events_none {\n    pointer-events: none;\n    color: #aaaaaa !important;\n}\n\n.ionic_datepicker_modal .select_section {\n    padding: 1px 5px;\n}\n\n.ionic_datepicker_modal .button-clear {\n    color: #009688;\n}\n\n.ionic_datepicker_modal .month_select, .ionic_datepicker_modal .year_select {\n    border: none;\n    border-bottom: 1px solid #009688;\n    padding: 0;\n}\n\n.ionic_datepicker_modal .month_select .input-label, .ionic_datepicker_modal .year_select .input-label {\n    padding: 2px 0;\n    width: 0;\n}\n\n.ionic_datepicker_modal .month_select select, .ionic_datepicker_modal .year_select select {\n    left: 10px;\n    border: none;\n    padding: 0 10px;\n}\n\n.ionic_datepicker_modal .month_select:after, .ionic_datepicker_modal .year_select:after {\n    right: 5px;\n    color: #009688;\n}\n\n.ionic_datepicker_modal .padding_left_5px {\n    padding-left: 5px;\n}\n\n.ionic_datepicker_modal .padding_right_5px {\n    padding-right: 5px;\n}\n\n.ionic_datepicker_modal .date_col {\n    height: 50px;\n    line-height: 50px;\n}\n\n.ionic_datepicker_modal .font_bold {\n    font-weight: bold;\n}\n\n.ionic_datepicker_modal .font_22px {\n    font-size: 22px;\n}\n\n.platform-android .ionic_datepicker_modal .bar .title.title-left {\n    text-align: center;\n}\n\n.platform-android .ionic_datepicker_modal select {\n    left: 25%;\n}\n\n.platform-ios .ionic_datepicker_modal select {\n    left: 5%;\n}\n\n.date_col {\n    cursor: pointer;\n}"),function(e){try{e=angular.module("ionic-datepicker.templates")}catch(t){e=angular.module("ionic-datepicker.templates",[])}e.run(["$templateCache",function(e){e.put("ionic-datepicker-modal.html",'<ion-modal-view class=ionic_datepicker_modal><ion-header-bar class=header><h1 class=title>{{mainObj.titleLabel || selctedDateEpoch | date : mainObj.dateFormat}}</h1></ion-header-bar><ion-content class=ionic_datepicker_modal_content><div><div class="row text-center"><div class="col col-10 left_arrow" ng-click=prevMonth()><button class="button-clear font_22px" ng-class="{\'pointer_events_none\':((firstDayEpoch - 86400000) < fromDate)}"><i class="icon ion-chevron-left"></i></button></div><div class="col col-80 text-center"><div class="row select_section"><div class="col col-50 padding_right_5px"><label class="item item-input item-select month_select"><span class=input-label>&nbsp;</span><select ng-model=data.currentMonth ng-options="select as item.text for item in monthsList track by item.value" ng-change=monthChanged(data.currentMonth)>{{month}}</select></label></div><div class="col col-50 padding_left_5px"><label class="item item-input item-select year_select"><span class=input-label>&nbsp;</span><select ng-model=data.currentYear ng-change=yearChanged(data.currentYear) ng-options="year for year in yearsList"></select></label></div></div></div><div class="col col-10 right_arrow" ng-click=nextMonth()><button class="button-clear font_22px" ng-class="{\'pointer_events_none\':((lastDayEpoch + 86400000)> toDate)}"><i class="icon ion-chevron-right"></i></button></div></div><div class=calendar_grid><div class="row padding-top weeks_row"><div class="col text-center font_bold" ng-repeat="weekName in weeksList track by $index" ng-bind=weekName></div></div><div><div class="row text-center padding_top_zero" ng-repeat="row in rows track by $index"><div class="col padding_zero date_col" ng-repeat="col in cols track by $index" ng-class="{\'selected_date\': ((mainObj.selectMode === \'day\' && dayList[row + $index].epoch === selctedDateEpoch) || (mainObj.selectMode !== \'day\' && dayList[row + $index].epoch >= selctedDateEpoch && dayList[row + $index].epoch <= selctedDateEpochEndWeek)), \'today\' : (dayList[row + $index].epoch == today), \'pointer_events_none\':((disabledDates.indexOf(dayList[row + $index].epoch) >= 0) || (dayList[row + $index].disabled))}" ng-click="dateSelected(dayList[row + $index])"><div class=date_cell>{{dayList[row + col].date}}</div></div></div></div></div></div></ion-content><ion-footer-bar class=footer><div class="row padding_zero"><button class="button button-clear button-block button_close" ng-click=closeIonicDatePickerModal()>{{mainObj.closeLabel}}</button> <button class="button button-clear button-block button_today" ng-if=mainObj.showTodayButton ng-click=setIonicDatePickerTodayDate()>{{mainObj.todayLabel}}</button> <button class="button button-clear button-block button_set" ng-if=!mainObj.closeOnSelect ng-click=setIonicDatePickerDate()>{{mainObj.setLabel}}</button></div></ion-footer-bar></ion-modal-view>')}])}(),function(e){try{e=angular.module("ionic-datepicker.templates")}catch(t){e=angular.module("ionic-datepicker.templates",[])}e.run(["$templateCache",function(e){e.put("ionic-datepicker-popup.html",'<div class=selected_date_full>{{mainObj.titleLabel || selctedDateEpoch | date : mainObj.dateFormat}}</div><div class=date_selection><div class="row show_nav"><div class="col col-10 prev_btn_section col-center" ng-click=prevMonth()><button class=button-clear ng-class="{\'pointer_events_none\':((firstDayEpoch - 86400000) < fromDate)}"><i class="icon ion-chevron-left"></i></button></div><div class="col col-80 month_year_section text-center"><div class="row select_section"><div class="col col-50 padding_right_5px"><label class="item item-input item-select month_select"><span class=input-label>&nbsp;</span><select ng-model=data.currentMonth ng-options="select as item.text for item in monthsList track by item.value" ng-change=monthChanged(data.currentMonth)>{{month}}</select></label></div><div class="col col-50 padding_left_5px"><label class="item item-input item-select year_select"><span class=input-label>&nbsp;</span><select ng-model=data.currentYear ng-change=yearChanged(data.currentYear) ng-options="year for year in yearsList"></select></label></div></div></div><div class="col col-10 next_btn_section col-center" ng-click=nextMonth()><button class=button-clear ng-class="{\'pointer_events_none\':((lastDayEpoch + 86400000)> toDate)}"><i class="icon ion-chevron-right"></i></button></div></div><div class=calendar_grid><div class="row weeks_row"><div class="col text-center font_bold" ng-repeat="weekName in weeksList track by $index" ng-bind=weekName></div></div><div><div class="row text-center padding_zero" ng-repeat="row in rows track by $index"><div class="col no_padding date_col" ng-repeat="col in cols track by $index" ng-class="{\'selected_date\': ((mainObj.selectMode === \'day\' && dayList[row + $index].epoch === selctedDateEpoch) || (mainObj.selectMode !== \'day\' && dayList[row + $index].epoch >= selctedDateEpoch && dayList[row + $index].epoch <= selctedDateEpochEndWeek)), \'today\' : (dayList[row + $index].epoch == today), \'pointer_events_none\':((disabledDates.indexOf(dayList[row + $index].epoch) >= 0) || dayList[row + $index].disabled)}" ng-click="dateSelected(dayList[row + $index])"><div class=date_cell>{{dayList[row + col].date}}</div></div></div></div></div></div>')}])}(),angular.module("ionic-datepicker",["ionic","ionic-datepicker.service","ionic-datepicker.provider","ionic-datepicker.templates"]),angular.module("ionic-datepicker.provider",[]).provider("ionicDatePicker",function(){var e={titleLabel:null,setLabel:"Set",todayLabel:"Today",closeLabel:"Close",inputDate:new Date,mondayFirst:!0,weeksList:["S","M","T","W","T","F","S"],monthsList:["Jan","Feb","March","April","May","June","July","Aug","Sept","Oct","Nov","Dec"],templateType:"popup",showTodayButton:!1,closeOnSelect:!1,disableWeekdays:[],selectMode:"day"};this.configDatePicker=function(t){angular.extend(e,t)},this.$get=["$rootScope","$ionicPopup","$ionicModal","IonicDatepickerService",function(t,n,a,o){function i(e){return e.setHours(0),e.setMinutes(0),e.setSeconds(0),e.setMilliseconds(0),e}function c(e){e.disabledDates&&0!==e.disabledDates.length?(u.disabledDates=[],angular.forEach(e.disabledDates,function(e,t){e=i(new Date(e)),u.disabledDates.push(e.getTime())})):u.disabledDates=[]}function d(e){e=i(e),u.currentDate=angular.copy(e);var t=new Date(e.getFullYear(),e.getMonth(),1).getDate(),n=new Date(e.getFullYear(),e.getMonth()+1,0).getDate();u.monthsNames=o.getMonthsNames(u.mainObj.monthsList),u.monthsList=o.getMonthsList(u.monthsNames,u.mainObj.from,u.mainObj.to),u.yearsList=o.getYearsList(u.mainObj.from,u.mainObj.to),u.dayList=[];var a,c;u.firstDayEpoch=i(new Date(e.getFullYear(),e.getMonth(),t)).getTime(),u.lastDayEpoch=i(new Date(e.getFullYear(),e.getMonth(),n)).getTime();for(var d=t;d<=n;d++)a=new Date(e.getFullYear(),e.getMonth(),d),c=a.getTime()<u.fromDate||a.getTime()>u.toDate||u.mainObj.disableWeekdays.indexOf(a.getDay())>=0,u.dayList.push({date:a.getDate(),month:a.getMonth(),year:a.getFullYear(),day:a.getDay(),epoch:a.getTime(),disabled:c});var r=u.dayList[0].day-u.mainObj.mondayFirst;r=r<0?6:r;for(var l=0;l<r;l++)u.dayList.unshift({});u.rows=[0,7,14,21,28,35],u.cols=[0,1,2,3,4,5,6],u.data.currentMonth=g(u.currentDate.getMonth(),u.monthsList),u.data.currentYear=e.getFullYear(),u.data.currentMonthSelected=angular.copy(u.data.currentMonth),u.currentYearSelected=angular.copy(u.data.currentYear),u.numColumns=7}function r(e){u.mainObj=angular.copy(e),u.mainObj.inputDate=i(u.mainObj.inputDate),u.adjustSelctedDateEpoch(u.mainObj.inputDate,!0),u.mainObj.weeksList&&7===u.mainObj.weeksList.length?u.weeksList=u.mainObj.weeksList:u.weeksList=["S","M","T","W","T","F","S"],u.mainObj.mondayFirst&&u.weeksList.push(u.mainObj.weeksList.shift()),u.disableWeekdays=u.mainObj.disableWeekdays,d(u.mainObj.inputDate),c(u.mainObj)}function l(){u.modal.show()}function p(){u.modal.hide()}var s={},u=t.$new();u.today=i(new Date).getTime(),u.disabledDates=[],u.data={},u.prevMonth=function(){var e=new Date(u.selctedDateEpoch),t=_(e.getDate(),e.getMonth()-1,e.getFullYear()-(0==e.getMonth()?1:0)),n=i(new Date(u.currentDate.getFullYear(),u.currentDate.getMonth()-1,t)),a=new Date(u.fromDate);n.getFullYear()<a.getFullYear()||n.getFullYear()==a.getFullYear()&&n.getMonth()<a.getMonth()||(n.getFullYear()==a.getFullYear()&&n.getMonth()==a.getMonth()&&n.getDate()<a.getDate()&&n.setDate(a.getDate()),u.currentDate=n,u.data.currentMonth=g(u.currentDate.getMonth(),u.monthsList),u.data.currentYear=u.currentDate.getFullYear(),u.adjustSelctedDateEpoch(u.currentDate,!0),d(u.currentDate))},u.nextMonth=function(){var e=new Date(u.selctedDateEpoch),t=_(e.getDate(),e.getMonth()+1,e.getFullYear()+(11==e.getMonth()?1:0)),n=i(new Date(u.currentDate.getFullYear(),u.currentDate.getMonth()+1,t)),a=new Date(u.toDate);n.getFullYear()>a.getFullYear()||n.getFullYear()==a.getFullYear()&&n.getMonth()>a.getMonth()||(n.getFullYear()==a.getFullYear()&&n.getMonth()==a.getMonth()&&n.getDate()>a.getDate()&&n.setDate(a.getDate()),u.currentDate=n,u.data.currentMonth=g(u.currentDate.getMonth(),u.monthsList),u.data.currentYear=u.currentDate.getFullYear(),u.adjustSelctedDateEpoch(u.currentDate,!0),d(u.currentDate))};var g=function(e,t){for(var n=0;n<t.length;n++)if(t[n].value===e)return t[n];return t[0]},_=function(e,t,n){var a=new Date(n,t+1,0).getDate();return e>a&&(e=a),e};return u.dateSelected=function(e){e&&0!==Object.keys(e).length&&(u.adjustSelctedDateEpoch(e,!1),u.mainObj.closeOnSelect&&(u.mainObj.callback("day"==u.mainObj.selectMode?u.selctedDateEpoch:{start:u.selctedDateEpoch,end:u.selctedDateEpochEndWeek}),"popup"==u.mainObj.templateType.toLowerCase()?u.popup.close():p()))},u.setIonicDatePickerTodayDate=function(){var e=i(new Date);u.adjustSelctedDateEpoch(e,!0),d(e)},u.setIonicDatePickerDate=function(){u.mainObj.callback("day"==u.mainObj.selectMode?u.selctedDateEpoch:{start:u.selctedDateEpoch,end:u.selctedDateEpochEndWeek}),p()},u.adjustSelctedDateEpoch=function(e,t){var n,a=t?e.getTime():e.epoch;if("week"==u.mainObj.selectMode)n=new Date(a),u.mainObj.mondayFirst?n.setDate(n.getDate()-new Date(a).getDay()+1):n.setDate(n.getDate()-new Date(a).getDay()),a=n.getTime(),n.setDate(n.getDate()+6),u.selctedDateEpochEndWeek=n.getTime();else if("month"==u.mainObj.selectMode){n=new Date(a),n.setDate(1),a=n.getTime();var o=new Date(n.getYear(),n.getMonth()+1,0).getDate();n=new Date(n.getFullYear(),n.getMonth(),o),u.selctedDateEpochEndWeek=n.getTime()}u.selctedDateEpoch=a},u.monthChanged=function(e){var t=e,n=new Date(u.selctedDateEpoch),a=_(n.getDate(),t,n.getFullYear());u.currentDate=i(new Date(u.currentDate.getFullYear(),t,a)),u.adjustSelctedDateEpoch(u.currentDate,!0),d(u.currentDate)},u.yearChanged=function(e){var t=new Date(u.selctedDateEpoch),n=_(t.getDate(),t.getMonth(),e);u.currentDate=i(new Date(e,u.currentDate.getMonth(),n)),u.adjustSelctedDateEpoch(u.currentDate,!0),d(u.currentDate)},a.fromTemplateUrl("ionic-datepicker-modal.html",{scope:u,animation:"slide-in-up"}).then(function(e){u.modal=e}),u.$on("$destroy",function(){u.modal.remove()}),u.closeIonicDatePickerModal=function(){p()},s.openDatePicker=function(t){var a=[];delete u.fromDate,delete u.toDate,u.mainObj=angular.extend({},e,t),u.mainObj.from&&(u.fromDate=i(new Date(u.mainObj.from)).getTime()),u.mainObj.to&&(u.toDate=i(new Date(u.mainObj.to)).getTime()),t.disableWeekdays&&e.disableWeekdays&&(u.mainObj.disableWeekdays=t.disableWeekdays.concat(e.disableWeekdays)),r(u.mainObj),a=[{text:u.mainObj.closeLabel,type:"button_close",onTap:function(e){console.log("ionic-datepicker popup closed.")}}],u.mainObj.showTodayButton&&a.push({text:u.mainObj.todayLabel,type:"button_today",onTap:function(e){var t=i(new Date);u.adjustSelctedDateEpoch(t,!0),d(t),e.preventDefault()}}),u.mainObj.closeOnSelect||a.push({text:u.mainObj.setLabel,type:"button_set",onTap:function(e){u.mainObj.callback("day"==u.mainObj.selectMode?u.selctedDateEpoch:{start:u.selctedDateEpoch,end:u.selctedDateEpochEndWeek})}}),"popup"==u.mainObj.templateType.toLowerCase()?u.popup=n.show({templateUrl:"ionic-datepicker-popup.html",scope:u,cssClass:"ionic_datepicker_popup",buttons:a}):l()},s}]}),angular.module("ionic-datepicker.service",[]).service("IonicDatepickerService",function(){this.getYearsList=function(e,t){var n=[],a=1900,o=2100;a=e?new Date(e).getFullYear():a,o=t?new Date(t).getFullYear():o;for(var i=a;i<=o;i++)n.push(i);return n},this.getMonthsList=function(e,t,n){var a=[],o=0,i=11;o=t?new Date(t).getMonth():o,i=n?new Date(n).getMonth():i;for(var c=0;c<=11;c++)c>=o&&c<=i&&a.push({value:c,text:e[c]});return a},this.getMonthsNames=function(e){return e&&12===e.length?e:["January","February","March","April","May","June","July","August","September","October","November","December"]}});
\ No newline at end of file
diff --git a/src/ionic-datepicker-modal.html b/src/ionic-datepicker-modal.html
index 3cbb0fe..f233008 100644
--- a/src/ionic-datepicker-modal.html
+++ b/src/ionic-datepicker-modal.html
@@ -17,7 +17,6 @@ <h1 class="title">{{mainObj.titleLabel || selctedDateEpoch | date : mainObj.date
               <label class="item item-input item-select month_select">
                 <span class="input-label">&nbsp;</span>
                 <select ng-model="data.currentMonth" ng-options="select as item.text for item in monthsList track by item.value" ng-change="monthChanged(data.currentMonth)">
-                  <!--<option ng-repeat="month in monthsList | filter:{'!!'}" ng-selected="month == data.currentMonthSelected" value="{{month}}">-->
                     {{month}}
                   </option>
                 </select>
diff --git a/src/ionic-datepicker-popup.html b/src/ionic-datepicker-popup.html
index e8734f8..4b9329f 100644
--- a/src/ionic-datepicker-popup.html
+++ b/src/ionic-datepicker-popup.html
@@ -12,8 +12,7 @@
         <div class="col col-50 padding_right_5px">
           <label class="item item-input item-select month_select">
             <span class="input-label">&nbsp;</span>
-            <select ng-model="data.currentMonth" ng-change="monthChanged(data.currentMonth)">
-              <option ng-repeat="month in monthsList" ng-selected="month==data.currentMonthSelected" value="{{month}}">
+              <select ng-model="data.currentMonth" ng-options="select as item.text for item in monthsList track by item.value" ng-change="monthChanged(data.currentMonth)">
                 {{month}}
               </option>
             </select>
diff --git a/src/ionic-datepicker.provider.js b/src/ionic-datepicker.provider.js
index 0f82e94..20ac735 100644
--- a/src/ionic-datepicker.provider.js
+++ b/src/ionic-datepicker.provider.js
@@ -61,7 +61,7 @@ angular.module('ionic-datepicker.provider', [])
         }
 
         $scope.currentDate = newDate;
-        $scope.data.currentMonth = $scope.monthsNames[$scope.currentDate.getMonth()];
+        $scope.data.currentMonth = findMonth($scope.currentDate.getMonth(), $scope.monthsList);
         $scope.data.currentYear = $scope.currentDate.getFullYear();
         $scope.adjustSelctedDateEpoch($scope.currentDate, true);
         refreshDateList($scope.currentDate);
@@ -88,12 +88,21 @@ angular.module('ionic-datepicker.provider', [])
         }
 
         $scope.currentDate = newDate;
-        $scope.data.currentMonth = $scope.monthsNames[$scope.currentDate.getMonth()];
+        $scope.data.currentMonth = findMonth($scope.currentDate.getMonth(), $scope.monthsList);
         $scope.data.currentYear = $scope.currentDate.getFullYear();
         $scope.adjustSelctedDateEpoch($scope.currentDate, true);
         refreshDateList($scope.currentDate);
       };
 
+      var findMonth = function(monthId, scopeMonthList) {
+        for(var i = 0; i < scopeMonthList.length; i++) {
+            if(scopeMonthList[i].value === monthId) {
+                return scopeMonthList[i];
+            }
+        }
+        return scopeMonthList[0];
+      };
+
         //Get the acceptable day
         var getAcceptableDay = function(currentDay, newMonth, newYear) {
             var nbDaysInMonth = new Date(newYear, newMonth+1, 0).getDate();
@@ -223,7 +232,7 @@ angular.module('ionic-datepicker.provider', [])
         $scope.rows = [0, 7, 14, 21, 28, 35];
         $scope.cols = [0, 1, 2, 3, 4, 5, 6];
 
-        $scope.data.currentMonth = $scope.monthsNames[currentDate.getMonth()];
+        $scope.data.currentMonth = findMonth($scope.currentDate.getMonth(), $scope.monthsList);
         $scope.data.currentYear = currentDate.getFullYear();
         $scope.data.currentMonthSelected = angular.copy($scope.data.currentMonth);
         $scope.currentYearSelected = angular.copy($scope.data.currentYear);
@@ -232,7 +241,7 @@ angular.module('ionic-datepicker.provider', [])
 
       //Month changed
       $scope.monthChanged = function (month) {
-        var monthNumber = $scope.monthsNames.indexOf(month);
+        var monthNumber = month;
         var selectedDate = new Date($scope.selctedDateEpoch);
         var newDay = getAcceptableDay(selectedDate.getDate(),
             monthNumber,
diff --git a/src/ionic-datepicker.service.js b/src/ionic-datepicker.service.js
index f505063..269d5dd 100644
--- a/src/ionic-datepicker.service.js
+++ b/src/ionic-datepicker.service.js
@@ -17,7 +17,6 @@ angular.module('ionic-datepicker.service', [])
       return yearsList;
     };
 
-    // 12 items, not available months are null
     // item has "value" and "text" json keys
     this.getMonthsList = function (monthNames, from, to) {
       var monthsList = [];