diff --git a/dist/ionic-datepicker.bundle.min.js b/dist/ionic-datepicker.bundle.min.js index 27b42917..a1243177 100644 --- 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}"),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",'

{{mainObj.titleLabel || selctedDateEpoch | date : mainObj.dateFormat}}

{{dayList[row + col].date}}
')}])}(),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",'
{{mainObj.titleLabel || selctedDateEpoch | date : mainObj.dateFormat}}
{{dayList[row + col].date}}
')}])}(),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:[]};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.monthsList=[],u.mainObj.monthsList&&12===u.mainObj.monthsList.length?u.monthsList=u.mainObj.monthsList:u.monthsList=o.monthsList,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.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

{{mainObj.titleLabel || data.currentMonth + " " + data.currentYear}}

{{dayList[row + col].weekNumber}} {{dayList[row + col].date}}
')}])}(),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",'
{{mainObj.titleLabel || selctedDateEpoch | date : mainObj.dateFormat}}
{{dayList[row + col].date}}
')}])}(),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:[],enableWeekNumber:!1,weekNumberLabel:"CW"};this.configDatePicker=function(t){angular.extend(e,t)},this.$get=["$rootScope","$ionicPopup","$ionicModal","IonicDatepickerService","$filter",function(t,n,a,o,i){function c(e){return e.setHours(0),e.setMinutes(0),e.setSeconds(0),e.setMilliseconds(0),e}function d(e){e=c(e),s.currentDate=angular.copy(e);var t=new Date(e.getFullYear(),e.getMonth(),1).getDate(),n=new Date(e.getFullYear(),e.getMonth()+1,0).getDate();s.monthsList=[],s.mainObj.monthsList&&12===s.mainObj.monthsList.length?s.monthsList=s.mainObj.monthsList:s.monthsList=o.monthsList,s.yearsList=o.getYearsList(s.mainObj.from,s.mainObj.to),s.dayList=[];var a,i;s.firstDayEpoch=c(new Date(e.getFullYear(),e.getMonth(),t)).getTime(),s.lastDayEpoch=c(new Date(e.getFullYear(),e.getMonth(),n)).getTime();for(var d=t;d<=n;d++)i=(a=new Date(e.getFullYear(),e.getMonth(),d)).getTime()s.toDate||s.mainObj.disableWeekdays.indexOf(a.getDay())>=0,s.dayList.push({date:a.getDate(),weekNumber:function(e){if(s.mainObj.enableWeekNumber)return s.mainObj.weekNumberLabel+" "+function(e){var t=new Date(e.valueOf()),n=(e.getDay()+6)%7;t.setDate(t.getDate()-n+3);var a=t.valueOf();t.setMonth(0,1),4!==t.getDay()&&t.setMonth(0,1+(4-t.getDay()+7)%7);return 1+Math.ceil((a-t)/6048e5)}(e)}(a),month:a.getMonth(),year:a.getFullYear(),day:a.getDay(),epoch:a.getTime(),disabled:i});var r=s.dayList[0].day-s.mainObj.mondayFirst;r=r<0?6:r;for(var l=0;l -

{{mainObj.titleLabel || selctedDateEpoch | date : mainObj.dateFormat}}

+

{{mainObj.titleLabel || data.currentMonth + " " + data.currentYear}}

@@ -46,11 +46,12 @@

{{mainObj.titleLabel || selctedDateEpoch | date : mainObj.date
= 0) || (dayList[row + $index].disabled))}" + 'pointer_events_none':((disabledDates.indexOf(dayList[row + $index].epoch) >= 0) || (dayList[row + $index].disabled)), + 'empty_cell' : (!dayList[row + col].date)}" ng-click="dateSelected(dayList[row + $index])"> -
+
{{dayList[row + col].weekNumber}} {{dayList[row + col].date}}
diff --git a/src/ionic-datepicker-popup.html b/src/ionic-datepicker-popup.html index 70b13867..51a44715 100644 --- a/src/ionic-datepicker-popup.html +++ b/src/ionic-datepicker-popup.html @@ -43,7 +43,7 @@
= 0) || dayList[row + $index].disabled)}" ng-click="dateSelected(dayList[row + $index])"> diff --git a/src/ionic-datepicker.provider.js b/src/ionic-datepicker.provider.js index 43ecd7b0..082960f6 100644 --- a/src/ionic-datepicker.provider.js +++ b/src/ionic-datepicker.provider.js @@ -14,14 +14,16 @@ angular.module('ionic-datepicker.provider', []) templateType: 'popup', showTodayButton: false, closeOnSelect: false, - disableWeekdays: [] + disableWeekdays: [], + enableWeekNumber: false, + weekNumberLabel: 'CW' }; this.configDatePicker = function (inputObj) { angular.extend(config, inputObj); }; - this.$get = ['$rootScope', '$ionicPopup', '$ionicModal', 'IonicDatepickerService', function ($rootScope, $ionicPopup, $ionicModal, IonicDatepickerService) { + this.$get = ['$rootScope', '$ionicPopup', '$ionicModal', 'IonicDatepickerService' , '$filter', function ($rootScope, $ionicPopup, $ionicModal, IonicDatepickerService, $filter) { var provider = {}; @@ -56,12 +58,10 @@ angular.module('ionic-datepicker.provider', []) if ($scope.currentDate.getMonth() === 11) { $scope.currentDate.setFullYear($scope.currentDate.getFullYear()); } - $scope.currentDate.setDate(1); $scope.currentDate.setMonth($scope.currentDate.getMonth() + 1); $scope.data.currentMonth = $scope.mainObj.monthsList[$scope.currentDate.getMonth()]; $scope.data.currentYear = $scope.currentDate.getFullYear(); - $scope.monthChanged($scope.currentDate.getMonth()); - refreshDateList(new Date()); + refreshDateList($scope.currentDate); changeDaySelected(); }; @@ -78,7 +78,7 @@ angular.module('ionic-datepicker.provider', []) if (!selectedDate || Object.keys(selectedDate).length === 0) return; $scope.selctedDateEpoch = selectedDate.epoch; if ($scope.mainObj.closeOnSelect) { - $scope.mainObj.callback($scope.selctedDateEpoch); + $scope.mainObj.callback($scope.selctedDateEpoch,'closed'); if ($scope.mainObj.templateType.toLowerCase() == 'popup') { $scope.popup.close(); } else { @@ -140,6 +140,7 @@ angular.module('ionic-datepicker.provider', []) $scope.dayList.push({ date: tempDate.getDate(), + weekNumber: weekNumber(tempDate), month: tempDate.getMonth(), year: tempDate.getFullYear(), day: tempDate.getDay(), @@ -183,6 +184,25 @@ angular.module('ionic-datepicker.provider', []) changeDaySelected(); }; + // set weeknumber + function weekNumber(myDate) { + if ($scope.mainObj.enableWeekNumber) { + return $scope.mainObj.weekNumberLabel + ' ' + ISO8601_week_no(myDate); + } + } + function ISO8601_week_no(dt) { + var tdt = new Date(dt.valueOf()); + var dayn = (dt.getDay() + 6) % 7; + tdt.setDate(tdt.getDate() - dayn + 3); + var firstThursday = tdt.valueOf(); + tdt.setMonth(0, 1); + if (tdt.getDay() !== 4) + { + tdt.setMonth(0, 1 + ((4 - tdt.getDay()) + 7) % 7); + } + return 1 + Math.ceil((firstThursday - tdt) / 604800000); + } + //Setting up the initial object function setInitialObj(ipObj) { $scope.mainObj = angular.copy(ipObj); @@ -197,6 +217,7 @@ angular.module('ionic-datepicker.provider', []) $scope.weeksList.push($scope.mainObj.weeksList.shift()); } $scope.disableWeekdays = $scope.mainObj.disableWeekdays; + $scope.enableWeekNumber = $scope.mainObj.enableWeekNumber; refreshDateList($scope.mainObj.inputDate); setDisabledDates($scope.mainObj); @@ -242,6 +263,7 @@ angular.module('ionic-datepicker.provider', []) if (ipObj.disableWeekdays && config.disableWeekdays) { $scope.mainObj.disableWeekdays = ipObj.disableWeekdays.concat(config.disableWeekdays); } + setInitialObj($scope.mainObj); if (!$scope.mainObj.closeOnSelect) { @@ -269,7 +291,7 @@ angular.module('ionic-datepicker.provider', []) disabled: false }; $scope.dateSelected(today_obj); - + refreshDateList(new Date()); $scope.selctedDateEpoch = resetHMSM(today).getTime(); $scope.mainObj.callback($scope.selctedDateEpoch); diff --git a/src/ionic-datepicker.service.js b/src/ionic-datepicker.service.js index b9e4485c..b5e5788a 100644 --- a/src/ionic-datepicker.service.js +++ b/src/ionic-datepicker.service.js @@ -1,21 +1,25 @@ + + angular.module('ionic-datepicker.service', []) - .service('IonicDatepickerService', function () { + .service('IonicDatepickerService', function () { + + this.monthsList = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; + + this.getYearsList = function (from, to) { + var yearsList = []; + var minYear = 1900; + var maxYear = 2100; - this.monthsList = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; + minYear = from ? new Date(from).getFullYear() : minYear; + maxYear = to ? new Date(to).getFullYear() : maxYear; - this.getYearsList = function (from, to) { - var yearsList = []; - var minYear = 1900; - var maxYear = 2100; + for (var i = minYear; i <= maxYear; i++) { + yearsList.push(i); + } - minYear = from ? new Date(from).getFullYear() : minYear; - maxYear = to ? new Date(to).getFullYear() : maxYear; + return yearsList; + }; + }); - for (var i = minYear; i <= maxYear; i++) { - yearsList.push(i); - } - return yearsList; - }; - }); diff --git a/src/scss/ionic-datepicker.styles.scss b/src/scss/ionic-datepicker.styles.scss index aca282ea..5d8c82de 100644 --- a/src/scss/ionic-datepicker.styles.scss +++ b/src/scss/ionic-datepicker.styles.scss @@ -240,6 +240,19 @@ left: 5%; } +.ionic_datepicker_modal { + .date_cell { + position: relative; + .weeknumber { + position: absolute; + top: -15px; + right: 1px; + font-weight: normal; + font-size: 9px; + } + } +} + .date_col { cursor: pointer; }