From d0649fa8d70d322f197b62310321b2503f019d90 Mon Sep 17 00:00:00 2001 From: Alko Schuster Date: Fri, 9 Oct 2015 10:34:17 +0200 Subject: [PATCH] - 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 #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 --- README.md | 11 +- bower.json | 2 +- dist/ionic-datepicker.bundle.min.js | 2 +- package.json | 2 +- src/ionic-datepicker-modal.html | 34 ++-- src/ionic-datepicker-popup.html | 20 +-- src/ionic-datepicker.directive.js | 267 +++++++++++++++++----------- src/ionic-datepicker.service.js | 50 ++---- src/ionic-datepicker.styles.css | 4 +- 9 files changed, 229 insertions(+), 163 deletions(-) diff --git a/README.md b/README.md index b49ac393..5f77329d 100755 --- 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 index 7cba4e4e..fc6151f0 100755 --- a/bower.json +++ b/bower.json @@ -1,5 +1,5 @@ { - "name": "ionic-datepicker-mbl", + "name": "ionic-datepicker", "version": "0.9.1", "authors": [ "rajeshwarpatlolla " diff --git a/dist/ionic-datepicker.bundle.min.js b/dist/ionic-datepicker.bundle.min.js index 3dfb7ce5..85f149ba 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(a){n.innerText=t}}(document,".selected_date_full {\n color: #387EF5;\n font-weight: bold;\n text-align: center;\n padding-bottom: 5px;\n}\n\n.color_blue {\n color: rgb(56, 126, 245) !important;\n}\n\n.bg_color_blue {\n background-color: rgb(56, 126, 245);\n}\n\n.date_col:hover {\n background-color: rgba(56, 126, 245, 0.5);\n cursor: pointer;\n}\n\n.date_col:active {\n background-color: rgba(56, 126, 245, 1);\n cursor: pointer;\n}\n\n.no_padding {\n padding: 0;\n}\n\n.date_cell {\n padding: 5px;\n}\n\n.date_selected {\n background-color: rgba(56, 126, 245, 1) !important;\n}\n\n.today {\n background-color: rgba(186, 186, 186, 1);\n}\n\n.pointer_events_none {\n pointer-events: none !important;\n color: #AAAAAA;\n}\n\n.select_section {\n padding: 0;\n}\n\n.select_section label {\n padding: 12px;\n}\n\n.select_section select {\n font-size: 12px;\n font-weight: bold;\n padding: 2px 10px;\n direction: ltr;\n left: 0;\n width: 100%;\n max-width: 100%;\n}\n\n.select_section .item-select:after {\n right: 4px;\n border-top: 4px solid;\n border-right: 4px solid rgba(0, 0, 0, 0);\n border-left: 4px solid rgba(0, 0, 0, 0);\n}\n\n.left_arrow {\n direction: rtl;\n}\n\n.right_arrow {\n\n}\n.ionic_datepicker_modal_content .selected_date_full {\n font-size: 20px;\n}\n.font_22px {\n font-size: 22px;\n}\n.ionic_datepicker_modal_content {\n padding-top: 10%;\n}\n.ionic_datepicker_modal_content .selected_date_full{\n padding: 20px;\n}\n@media (min-width: 680px) {\n .ionic_datepicker_modal_content {\n padding-top: 0;\n }\n .ionic_datepicker_modal_content .selected_date_full {\n font-size: inherit;\n }\n .ionic_datepicker_modal_content .selected_date_full{\n padding: 10px 0 0 0;\n }\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",'

{{titleLabel}}

{{selectedDateFull | date:"dd-MM-yyyy"}}
{{ weekName }}
{{ dayList[$parent.$index * numColumns + $index].date }}
{{errorMsgLabel}}
')}])}(),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",'
{{selectedDateFull | date:"dd-MM-yyyy"}}
{{ weekName }}
{{ dayList[$parent.$index * numColumns + $index].date }}
{{errorMsgLabel}}
')}])}(),function(){"use strict";angular.module("ionic-datepicker",["ionic","ionic-datepicker.templates"])}(),function(){"use strict";function e(e,t,n){return{restrict:"AE",replace:!0,scope:{inputObj:"=inputObj"},link:function(a,o,i){function l(){a.date_selection.submitted=!0,a.date_selection.selected===!0&&a.inputObj.callback(a.date_selection.selectedDate)}function s(){var e=new Date;e.setHours(0),e.setMinutes(0),e.setSeconds(0),e.setMilliseconds(0);var t=new Date(e.getFullYear(),e.getMonth(),e.getDate()),n={date:e.getDate(),month:e.getMonth(),year:e.getFullYear(),day:e.getDay(),dateString:e.toString(),epochLocal:t.getTime(),epochUTC:t.getTime()+60*t.getTimezoneOffset()*1e3};a.selctedDateString=n.dateString,a.selctedDateStringCopy=angular.copy(a.selctedDateString),a.date_selection.selected=!0,a.date_selection.selectedDate=new Date(n.dateString),p(new Date)}a.currentMonth="",a.currentYear="",a.disabledDates=[],a.titleLabel=a.inputObj.titleLabel?a.inputObj.titleLabel:"Select Date",a.todayLabel=a.inputObj.todayLabel?a.inputObj.todayLabel:"Today",a.closeLabel=a.inputObj.closeLabel?a.inputObj.closeLabel:"Close",a.setLabel=a.inputObj.setLabel?a.inputObj.setLabel:"Set",a.errorMsgLabel=a.inputObj.errorMsgLabel?a.inputObj.errorMsgLabel:"Please select a date.",a.setButtonType=a.inputObj.setButtonType?a.inputObj.setButtonType:"button-positive",a.todayButtonType=a.inputObj.todayButtonType?a.inputObj.todayButtonType:"button-stable",a.closeButtonType=a.inputObj.closeButtonType?a.inputObj.closeButtonType:"button-stable",a.templateType=a.inputObj.templateType?a.inputObj.templateType:"modal",a.modalHeaderColor=a.inputObj.modalHeaderColor?a.inputObj.modalHeaderColor:"bar-stable",a.modalFooterColor=a.inputObj.modalFooterColor?a.inputObj.modalFooterColor:"bar-stable",a.enableDatesFrom={epoch:0,isSet:!1},a.enableDatesTo={epoch:0,isSet:!1},a.inputObj.from&&(a.enableDatesFrom.isSet=!0,a.enableDatesFrom.epoch=a.inputObj.from.getTime()),a.inputObj.to&&(a.enableDatesTo.isSet=!0,a.enableDatesTo.epoch=a.inputObj.to.getTime()),a.inputObj.inputDate?a.ipDate=a.inputObj.inputDate:a.ipDate=new Date,a.selectedDateFull=a.ipDate,a.monthsList=[],a.inputObj.monthList&&12===a.inputObj.monthList.length?a.monthsList=a.inputObj.monthList:a.monthsList=n.monthsList,a.inputObj.weekDaysList&&7===a.inputObj.weekDaysList.length?a.weekNames=a.inputObj.weekDaysList:a.weekNames=["S","M","T","W","T","F","S"],a.yearsList=n.yearsList,a.mondayFirst=!!a.inputObj.mondayFirst,a.inputObj.disabledDates&&0===a.inputObj.disabledDates.length?a.disabledDates=[]:angular.forEach(a.inputObj.disabledDates,function(e){e.setHours(0),e.setMinutes(0),e.setSeconds(0),e.setMilliseconds(0),a.disabledDates.push(e.getTime())}),a.showTodayButton=angular.isDefined(a.inputObj.showTodayButton)&&!!a.inputObj.showTodayButton;var c=angular.copy(a.ipDate);if(c.setHours(0),c.setMinutes(0),c.setSeconds(0),c.setMilliseconds(0),a.selctedDateString=c.toString(),a.today={},a.mondayFirst===!0){var d=a.weekNames.shift();a.weekNames.push(d)}var r=new Date,u=new Date(r.getFullYear(),r.getMonth(),r.getDate());a.today={dateObj:r,date:u.getDate(),month:u.getMonth(),year:u.getFullYear(),day:u.getDay(),dateString:u.toString(),epochLocal:u.getTime(),epochUTC:u.getTime()+60*u.getTimezoneOffset()*1e3};var p=function(e){e.setHours(0),e.setMinutes(0),e.setSeconds(0),e.setMilliseconds(0),a.selctedDateString=new Date(e).toString(),c=angular.copy(e);var t=new Date(e.getFullYear(),e.getMonth(),1).getDate(),n=new Date(e.getFullYear(),e.getMonth()+1,0).getDate();a.dayList=[];for(var o=t;n>=o;o++){var i=new Date(e.getFullYear(),e.getMonth(),o);a.dayList.push({date:i.getDate(),month:i.getMonth(),year:i.getFullYear(),day:i.getDay(),dateString:i.toString(),epochLocal:i.getTime(),epochUTC:i.getTime()+60*i.getTimezoneOffset()*1e3})}var l=a.dayList[0].day-a.mondayFirst;l=0>l?6:l,a.currentMonthFirstDayEpoch=a.dayList[0].epochLocal,a.currentMonthLastDayEpoch=a.dayList[a.dayList.length-1].epochLocal;for(var s=0;l>s;s++)a.dayList.unshift({});a.rows=[],a.cols=[],a.currentMonth=a.monthsList[e.getMonth()],a.currentYear=e.getFullYear(),a.currentMonthSelected=a.currentMonth,a.currentYearSelected=a.currentYear,a.numColumns=7,a.rows.length=6,a.cols.length=a.numColumns};a.monthChanged=function(e){var t=a.monthsList.indexOf(e);c.setMonth(t),p(c)},a.yearChanged=function(e){c.setFullYear(e),p(c)},a.prevMonth=function(){1===c.getMonth()&&c.setFullYear(c.getFullYear()),c.setMonth(c.getMonth()-1),a.currentMonth=a.monthsList[c.getMonth()],a.currentYear=c.getFullYear(),p(c)},a.nextMonth=function(){11===c.getMonth()&&c.setFullYear(c.getFullYear()),c.setMonth(c.getMonth()+1),a.currentMonth=a.monthsList[c.getMonth()],a.currentYear=c.getFullYear(),p(c)},a.date_selection={selected:!1,selectedDate:"",submitted:!1},a.date_selection.selected=!0,a.date_selection.selectedDate=a.ipDate,a.dateSelected=function(e){e&&(a.selctedDateString=e.dateString,a.selctedDateStringCopy=angular.copy(a.selctedDateString),a.date_selection.selected=!0,a.date_selection.selectedDate=new Date(e.dateString),a.selectedDateFull=a.date_selection.selectedDate)},a.closeIonicDatePickerModal=function(){a.inputObj.callback(void 0),a.closeModal()},a.setIonicDatePickerTodayDate=function(){s()},a.setIonicDatePickerDate=function(){l(),a.closeModal()},t.fromTemplateUrl("ionic-datepicker-modal.html",{scope:a,animation:"slide-in-up"}).then(function(e){a.modal=e}),a.openModal=function(){a.modal.show()},a.closeModal=function(){a.modal.hide()},o.on("click",function(){if(p(a.date_selection.selectedDate?a.date_selection.selectedDate:a.ipDate?angular.copy(a.ipDate):new Date),"modal"===a.templateType.toLowerCase())a.openModal();else{var t=[];t.push({text:a.closeLabel,type:a.closeButtonType,onTap:function(){a.inputObj.callback(void 0)}}),a.showTodayButton&&t.push({text:a.todayLabel,type:a.todayButtonType,onTap:function(e){s(),e.preventDefault()}}),t.push({text:a.setLabel,type:a.setButtonType,onTap:function(){l()}}),e.show({templateUrl:"ionic-datepicker-popup.html",title:a.titleLabel,subTitle:"",scope:a,buttons:t})}})}}}angular.module("ionic-datepicker").directive("ionicDatepicker",e),e.$inject=["$ionicPopup","$ionicModal","IonicDatepickerService"]}(),function(){"use strict";function e(){this.monthsList=["January","February","March","April","May","June","July","August","September","October","November","December"],this.yearsList=[1900,1901,1902,1903,1904,1905,1906,1907,1908,1909,1910,1911,1912,1913,1914,1915,1916,1917,1918,1919,1920,1921,1922,1923,1924,1925,1926,1927,1928,1929,1930,1931,1932,1933,1934,1935,1936,1937,1938,1939,1940,1941,1942,1943,1944,1945,1946,1947,1948,1949,1950,1951,1952,1953,1954,1955,1956,1957,1958,1959,1960,1961,1962,1963,1964,1965,1966,1967,1968,1969,1970,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2e3,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025,2026,2027,2028,2029,2030,2031,2032,2033,2034,2035,2036,2037,2038,2039,2040,2041,2042,2043,2044,2045,2046,2047,2048,2049,2050,2051,2052,2053,2054,2055,2056,2057,2058,2059,2060,2061,2062,2063,2064,2065,2066,2067,2068,2069,2070,2071,2072,2073,2074,2075,2076,2077,2078,2079,2080,2081,2082,2083,2084,2085,2086,2087,2088,2089,2090,2091,2092,2093,2094,2095,2096,2097,2098,2099,2100]}angular.module("ionic-datepicker").service("IonicDatepickerService",e),e.$inject=[]}(); \ 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(a){n.innerText=t}}(document,".selected_date_full {\n color: #387EF5;\n font-weight: bold;\n text-align: center;\n padding-bottom: 5px;\n}\n\n.color_blue {\n color: rgb(56, 126, 245);\n}\n\n.bg_color_blue {\n background-color: rgb(56, 126, 245);\n}\n\n.date_col:hover {\n background-color: rgba(56, 126, 245, 0.5);\n cursor: pointer;\n}\n\n.date_col:active {\n background-color: rgba(56, 126, 245, 1);\n cursor: pointer;\n}\n\n.no_padding {\n padding: 0;\n}\n\n.date_cell {\n padding: 5px;\n}\n\n.date_selected {\n background-color: rgba(56, 126, 245, 1);\n}\n\n.today {\n background-color: rgba(186, 186, 186, 1);\n}\n\n.pointer_events_none {\n pointer-events: none !important;\n color: #AAAAAA;\n}\n\n.select_section {\n padding: 0;\n}\n\n.select_section label {\n padding: 12px;\n}\n\n.select_section select {\n font-size: 12px;\n font-weight: bold;\n padding: 2px 10px;\n direction: ltr;\n left: 0;\n width: 100%;\n max-width: 100%;\n}\n\n.select_section .item-select:after {\n right: 4px;\n border-top: 4px solid;\n border-right: 4px solid rgba(0, 0, 0, 0);\n border-left: 4px solid rgba(0, 0, 0, 0);\n}\n\n.left_arrow {\n direction: rtl;\n}\n\n.right_arrow {\n\n}\n.ionic_datepicker_modal_content .selected_date_full {\n font-size: 20px;\n}\n.font_22px {\n font-size: 22px;\n}\n.ionic_datepicker_modal_content {\n padding-top: 10%;\n}\n.ionic_datepicker_modal_content .selected_date_full{\n padding: 20px;\n}\n@media (min-width: 680px) {\n .ionic_datepicker_modal_content {\n padding-top: 0;\n }\n .ionic_datepicker_modal_content .selected_date_full {\n font-size: inherit;\n }\n .ionic_datepicker_modal_content .selected_date_full{\n padding: 10px 0 0 0;\n }\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",'

{{titleLabel}}

{{selectedDateFull | date:"dd-MM-yyyy"}}
{{ weekName }}
{{ dayList[$parent.$index * numColumns + $index].date }}
{{errorMsgLabel}}
')}])}(),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",'
{{selectedDateFull | date:"dd-MM-yyyy"}}
{{ weekName }}
{{ dayList[$parent.$index * numColumns + $index].date }}
{{errorMsgLabel}}
')}])}(),function(){"use strict";angular.module("ionic-datepicker",["ionic","ionic-datepicker.templates"])}(),function(){"use strict";function e(e,t,n){return{restrict:"AE",replace:!0,scope:{inputObj:"=inputObj"},link:function(a,o,i){function l(){a.date_selection.submitted=!0,a.date_selection.selected===!0&&a.inputObj.callback(a.date_selection.selectedDate)}function s(e){return e.setHours(0),e.setMinutes(0),e.setSeconds(0),e.setMilliseconds(0),e}function c(e){return e.getTime()a.enableDatesFrom.epoch&&(e.getFullYear()>a.enableDatesTo.epochDate.getFullYear()||e.getFullYear()===a.enableDatesTo.epochDate.getFullYear()&&e.getMonth()>a.enableDatesTo.epochDate.getMonth())?!1:!0}function d(e){var t=[];return angular.forEach(a.fullMonthsList,function(t,n){var a=new Date(e);a.setMonth(n),a.setDate(1);var o=new Date(e.getFullYear(),n+1,0);c(a)&&r(o)&&this.push(t)},t),t}function u(){var e=s(new Date),t=new Date(e.getFullYear(),e.getMonth(),e.getDate()),n={date:e.getDate(),month:e.getMonth(),year:e.getFullYear(),day:e.getDay(),dateString:e.toString(),epochLocal:t.getTime(),epochUTC:t.getTime()+60*t.getTimezoneOffset()*1e3};a.selctedDateString=n.dateString,a.selctedDateStringCopy=angular.copy(a.selctedDateString),a.date_selection.selected=!0,a.date_selection.selectedDate=new Date(n.dateString),b(e)}a.titleLabel=a.inputObj.titleLabel||"Select Date",a.subTitleLabel=a.inputObj.subTitleLabel||"",a.todayLabel=a.inputObj.todayLabel||"Today",a.closeLabel=a.inputObj.closeLabel||"Close",a.setLabel=a.inputObj.setLabel||"Set",a.errorMsgLabel=a.inputObj.errorMsgLabel||"Please select a date.",a.setButtonType=a.inputObj.setButtonType||"button-positive",a.todayButtonType=a.inputObj.todayButtonType||"button-stable",a.closeButtonType=a.inputObj.closeButtonType||"button-stable",a.templateType=a.inputObj.templateType||"modal",a.modalHeaderColor=a.inputObj.modalHeaderColor||"bar-stable",a.modalFooterColor=a.inputObj.modalFooterColor||"bar-stable",a.enableDatesFrom={epoch:(a.inputObj.from||new Date("January 1, 1900")).getTime()},a.enableDatesFrom.epochDate=s(new Date(a.enableDatesFrom.epoch)),a.enableDatesTo={epoch:(a.inputObj.to||new Date("December 31, 2100")).getTime()},a.enableDatesTo.epochDate=s(new Date(a.enableDatesTo.epoch)),a.inputObj.monthList&&12===a.inputObj.monthList.length?a.fullMonthsList=a.monthsList=a.inputObj.monthList:a.fullMonthsList=a.monthsList=n.monthsList,a.inputObj.weekDaysList&&7===a.inputObj.weekDaysList.length?a.weekNames=a.inputObj.weekDaysList:a.weekNames=["S","M","T","W","T","F","S"],a.yearsList=n.yearsList(a.enableDatesFrom,a.enableDatesTo),a.reverseTheYears=!!a.inputObj.reverseTheYears,a.reverseTheYears&&(a.yearsList=a.yearsList.slice().reverse()),a.mondayFirst=!!a.inputObj.mondayFirst,a.disabledDates=[],angular.isArray(a.inputObj.disabledDates)&&a.inputObj.disabledDates.length>0&&angular.forEach(a.inputObj.disabledDates,function(e){e=s(e),a.disabledDates.push(e.getTime())}),a.showTodayButton=angular.isDefined(a.inputObj.showTodayButton)?!!a.inputObj.showTodayButton:!0,a.inputObj.inputDate?a.ipDate=a.inputObj.inputDate:a.ipDate=new Date,a.ipDate.getTime()a.enableDatesTo.epoch&&(a.ipDate=new Date(a.enableDatesTo.epoch)),a.selectedDateFull=a.ipDate;var p=s(angular.copy(a.ipDate));if(a.selctedDateString=p.toString(),a.selctedDateStringCopy=angular.copy(a.selctedDateString),a.mondayFirst===!0){var h=a.weekNames.shift();a.weekNames.push(h)}var g=new Date,m=new Date(g.getFullYear(),g.getMonth(),g.getDate());a.today={dateObj:g,date:m.getDate(),month:m.getMonth(),year:m.getFullYear(),day:m.getDay(),dateString:m.toString(),epochLocal:m.getTime(),epochUTC:m.getTime()+60*m.getTimezoneOffset()*1e3};var b=function(e){e=s(e);var t=new Date(e.getFullYear(),e.getMonth()+1,0).getDate();a.dayList=[];for(var n=1;t>=n;n++){var o=new Date(e.getFullYear(),e.getMonth(),n);a.dayList.push({date:o.getDate(),month:o.getMonth(),year:o.getFullYear(),day:o.getDay(),dateString:o.toString(),epochLocal:o.getTime(),epochUTC:o.getTime()+60*o.getTimezoneOffset()*1e3})}var i=a.dayList[0].day-a.mondayFirst;i=0>i?6:i,a.currentMonthFirstDayEpoch=a.dayList[0].epochLocal,a.currentMonthLastDayEpoch=a.dayList[a.dayList.length-1].epochLocal;for(var l=0;i>l;l++)a.dayList.unshift({});a.rows=[],a.cols=[],a.selctedDateString=e.toString(),a.currentMonth=a.fullMonthsList[e.getMonth()],a.currentYear=String(e.getFullYear()),a.currentMonthSelected=a.currentMonth,a.currentYearSelected=a.currentYear,a.monthsList=d(e),a.numColumns=7,a.rows.length=6,a.cols.length=a.numColumns,p=s(angular.copy(e))};a.monthChanged=function(e){var t=a.fullMonthsList.indexOf(e);if(t=i;i++)o.push(i);return o}}angular.module("ionic-datepicker").service("IonicDatepickerService",e),e.$inject=[]}(); \ No newline at end of file diff --git a/package.json b/package.json index 132f3ab9..98f988ed 100644 --- 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 index cbfaa081..8c0789a0 100755 --- a/src/ionic-datepicker-modal.html +++ b/src/ionic-datepicker-modal.html @@ -7,15 +7,14 @@

{{titleLabel}}

{{selectedDateFull | date:"dd-MM-yyyy"}}
-
-
+
-
@@ -60,7 +58,7 @@

{{titleLabel}}

'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)}">
+ 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 }}
@@ -72,11 +70,17 @@

{{titleLabel}}

- +
-
-
-
+
+ +
+
+ +
+
+ +
diff --git a/src/ionic-datepicker-popup.html b/src/ionic-datepicker-popup.html index ba4c7ade..0cc96793 100644 --- a/src/ionic-datepicker-popup.html +++ b/src/ionic-datepicker-popup.html @@ -2,15 +2,14 @@
{{selectedDateFull | date:"dd-MM-yyyy"}}
-
-
+
-
@@ -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)}">
+ 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 }}
diff --git a/src/ionic-datepicker.directive.js b/src/ionic-datepicker.directive.js index 158aa8df..6456bf53 100644 --- a/src/ionic-datepicker.directive.js +++ b/src/ionic-datepicker.directive.js @@ -16,88 +16,87 @@ inputObj: "=inputObj" }, link: function (scope, element, attrs) { - - scope.currentMonth = ''; - scope.currentYear = ''; - scope.disabledDates = []; - //Setting the title, today, close and set strings for the date picker - scope.titleLabel = scope.inputObj.titleLabel ? (scope.inputObj.titleLabel) : 'Select Date'; - scope.todayLabel = scope.inputObj.todayLabel ? (scope.inputObj.todayLabel) : 'Today'; - scope.closeLabel = scope.inputObj.closeLabel ? (scope.inputObj.closeLabel) : 'Close'; - scope.setLabel = scope.inputObj.setLabel ? (scope.inputObj.setLabel) : 'Set'; - scope.errorMsgLabel = scope.inputObj.errorMsgLabel ? (scope.inputObj.errorMsgLabel) : 'Please select a date.'; - scope.setButtonType = scope.inputObj.setButtonType ? (scope.inputObj.setButtonType) : 'button-positive'; - scope.todayButtonType = scope.inputObj.todayButtonType ? (scope.inputObj.todayButtonType) : 'button-stable'; - scope.closeButtonType = scope.inputObj.closeButtonType ? (scope.inputObj.closeButtonType) : 'button-stable'; - scope.templateType = scope.inputObj.templateType ? (scope.inputObj.templateType) : 'modal'; - scope.modalHeaderColor = scope.inputObj.modalHeaderColor ? (scope.inputObj.modalHeaderColor) : 'bar-stable'; - scope.modalFooterColor = scope.inputObj.modalFooterColor ? (scope.inputObj.modalFooterColor) : 'bar-stable'; - - scope.enableDatesFrom = {epoch: 0, isSet: false}; - scope.enableDatesTo = {epoch: 0, isSet: false}; - - //Setting the from and to dates - if (scope.inputObj.from) { - scope.enableDatesFrom.isSet = true; - scope.enableDatesFrom.epoch = scope.inputObj.from.getTime(); - } - - if (scope.inputObj.to) { - scope.enableDatesTo.isSet = true; - scope.enableDatesTo.epoch = scope.inputObj.to.getTime(); - } + scope.titleLabel = scope.inputObj.titleLabel || 'Select Date'; + scope.subTitleLabel = scope.inputObj.subTitleLabel || ''; + scope.todayLabel = scope.inputObj.todayLabel || 'Today'; + scope.closeLabel = scope.inputObj.closeLabel || 'Close'; + scope.setLabel = scope.inputObj.setLabel || 'Set'; + scope.errorMsgLabel = scope.inputObj.errorMsgLabel || 'Please select a date.'; + scope.setButtonType = scope.inputObj.setButtonType || 'button-positive'; + scope.todayButtonType = scope.inputObj.todayButtonType || 'button-stable'; + scope.closeButtonType = scope.inputObj.closeButtonType || 'button-stable'; + scope.templateType = scope.inputObj.templateType || 'modal'; + scope.modalHeaderColor = scope.inputObj.modalHeaderColor || 'bar-stable'; + scope.modalFooterColor = scope.inputObj.modalFooterColor || 'bar-stable'; + + //From and to dates are set to the provided values with a fallback to the min/max years which were prior to + // this change returned by the default IonicDatepickerService.yearList. + scope.enableDatesFrom = { + epoch: (scope.inputObj.from || new Date('January 1, 1900')).getTime() + }; + scope.enableDatesFrom.epochDate = clearHMSM(new Date(scope.enableDatesFrom.epoch)); - //Setting the input date for the date picker - if (scope.inputObj.inputDate) { - scope.ipDate = scope.inputObj.inputDate; - } else { - scope.ipDate = new Date(); - } - scope.selectedDateFull = scope.ipDate; + scope.enableDatesTo = { + epoch: (scope.inputObj.to || new Date('December 31, 2100')).getTime() + }; + scope.enableDatesTo.epochDate = clearHMSM(new Date(scope.enableDatesTo.epoch)); //Setting the months list. This is useful, if the component needs to use some other language. - scope.monthsList = []; if (scope.inputObj.monthList && scope.inputObj.monthList.length === 12) { - scope.monthsList = scope.inputObj.monthList; + scope.fullMonthsList = scope.monthsList = scope.inputObj.monthList; } else { - scope.monthsList = IonicDatepickerService.monthsList; + scope.fullMonthsList = scope.monthsList = IonicDatepickerService.monthsList; } if (scope.inputObj.weekDaysList && scope.inputObj.weekDaysList.length === 7) { scope.weekNames = scope.inputObj.weekDaysList; } else { scope.weekNames = ['S', 'M', 'T', 'W', 'T', 'F', 'S']; } - scope.yearsList = IonicDatepickerService.yearsList; + //Setting the yearsList + scope.yearsList = IonicDatepickerService.yearsList(scope.enableDatesFrom, scope.enableDatesTo); + + //Want to reverse the years in the select list? We do it here... + scope.reverseTheYears = !!scope.inputObj.reverseTheYears; + if (scope.reverseTheYears) { + scope.yearsList = scope.yearsList.slice().reverse(); + } //Setting whether to show Monday as the first day of the week or not. scope.mondayFirst = !!scope.inputObj.mondayFirst; //Setting the disabled dates list. - if (scope.inputObj.disabledDates && scope.inputObj.disabledDates.length === 0) { - scope.disabledDates = []; - } else { + scope.disabledDates = []; + if (angular.isArray(scope.inputObj.disabledDates) && scope.inputObj.disabledDates.length > 0) { angular.forEach(scope.inputObj.disabledDates, function (val) { - val.setHours(0); - val.setMinutes(0); - val.setSeconds(0); - val.setMilliseconds(0); - + val = clearHMSM(val); scope.disabledDates.push(val.getTime()); }); } - //Setting whether to show the Today button; - scope.showTodayButton = angular.isDefined(scope.inputObj.showTodayButton) && !!scope.inputObj.showTodayButton; + //Setting whether to show the Today button, defaults to true; + scope.showTodayButton = angular.isDefined(scope.inputObj.showTodayButton) ? !!scope.inputObj.showTodayButton : true; + + //Setting the input date for the date picker + if (scope.inputObj.inputDate) { + scope.ipDate = scope.inputObj.inputDate; + } else { + scope.ipDate = new Date(); + } + + // Check whether the input date falls in range of the defined From and To dates + if (scope.ipDate.getTime() < scope.enableDatesFrom.epoch) { + scope.ipDate = new Date(scope.enableDatesFrom.epoch); //input date earlier than allowed, set it to minimum allowed. + } else if (scope.ipDate.getTime() > scope.enableDatesTo.epoch) { + scope.ipDate = new Date(scope.enableDatesTo.epoch); //input date later than allowed, set it to allowed maximum. + } + scope.selectedDateFull = scope.ipDate; - var currentDate = angular.copy(scope.ipDate); - currentDate.setHours(0); - currentDate.setMinutes(0); - currentDate.setSeconds(0); - currentDate.setMilliseconds(0); + var currentDate = clearHMSM(angular.copy(scope.ipDate)); scope.selctedDateString = currentDate.toString(); - scope.today = {}; + // set selctedDateStringCopy so the Initial/Input date gets visually selected in the day list as well + scope.selctedDateStringCopy = angular.copy(scope.selctedDateString); if (scope.mondayFirst === true) { var lastWeekDay = scope.weekNames.shift(); @@ -119,20 +118,13 @@ }; var refreshDateList = function (current_date) { - current_date.setHours(0); - current_date.setMinutes(0); - current_date.setSeconds(0); - current_date.setMilliseconds(0); - - scope.selctedDateString = (new Date(current_date)).toString(); - currentDate = angular.copy(current_date); - var firstDay = new Date(current_date.getFullYear(), current_date.getMonth(), 1).getDate(); + current_date = clearHMSM(current_date); var lastDay = new Date(current_date.getFullYear(), current_date.getMonth() + 1, 0).getDate(); scope.dayList = []; - for (var i = firstDay; i <= lastDay; i++) { + for (var i = 1; i <= lastDay; i++) { var tempDate = new Date(current_date.getFullYear(), current_date.getMonth(), i); scope.dayList.push({ date: tempDate.getDate(), @@ -159,52 +151,92 @@ scope.rows = []; scope.cols = []; - scope.currentMonth = scope.monthsList[current_date.getMonth()]; - scope.currentYear = current_date.getFullYear(); + scope.selctedDateString = current_date.toString(); + scope.currentMonth = scope.fullMonthsList[current_date.getMonth()]; + // scope.currentYear has to be a String value at this point and may not be numeric. This is because ngRepeat needs + // the model value to be in the list of values it iterates over. When no corresponding value is found, ngRepeat adds an + // empty option to the select, like so: . Which we offcourse do not want! + // As a number it supposedly cannot find the value in the array, when converted to a string, it does... + scope.currentYear = String(current_date.getFullYear()); scope.currentMonthSelected = scope.currentMonth; scope.currentYearSelected = scope.currentYear; + scope.monthsList = buildMonthList(current_date); + scope.numColumns = 7; scope.rows.length = 6; scope.cols.length = scope.numColumns; + + currentDate = clearHMSM(angular.copy(current_date)); }; scope.monthChanged = function (month) { - var monthNumber = scope.monthsList.indexOf(month); - currentDate.setMonth(monthNumber); - refreshDateList(currentDate); + var monthNumber = scope.fullMonthsList.indexOf(month); + if (monthNumber < currentDate.getMonth()) { //moving backwards so check From Date. + var prevDate = clearHMSM(new Date(currentDate)); + prevDate.setDate(1); + prevDate.setMonth(monthNumber); + if (earlierDateIsOk(prevDate)) { + refreshDateList(prevDate); + } + else { + refreshDateList(scope.enableDatesFrom.epochDate); // Since date transition is not allowed, reset the Dropdowns to first allowed date + } + } else { //it's not smaller, and because it changed, it must be bigger... so check the To date + // new Date with a 0 for the days will translate into the last day of the previous month. So add 1 month more than requested + // with day 0 and we end up with the last day of the desired month ;) + var nextDate = clearHMSM(new Date(currentDate.getFullYear(), monthNumber + 1, 0)); + if (laterDateIsOk(nextDate)) { + refreshDateList(nextDate); + } else { + // Since date transition to a date outside the max range is not allowed, move to the last allowed month + refreshDateList(scope.enableDatesTo.epochDate); + } + } }; scope.yearChanged = function (year) { - currentDate.setFullYear(year); - refreshDateList(currentDate); + if (year < currentDate.getFullYear()) { + var prevDate = clearHMSM(new Date(currentDate)); + prevDate.setDate(1); + prevDate.setFullYear(year); + if (earlierDateIsOk(prevDate)) { + refreshDateList(prevDate); + } + else { + refreshDateList(scope.enableDatesFrom.epochDate); // Since date transition is not allowed, reset the Dropdowns to the first allowed date + } + } else { //it's not smaller, and because it changed, it must be bigger... so check the To date + // new Date with a 0 for the days will translate into the last day of the previous month. So add 1 month more than requested + // with day 0 and we end up with the last day of the desired month ;) + var nextDate = clearHMSM(new Date(year, currentDate.getMonth() + 1, 0)); + if (laterDateIsOk(nextDate)) { + refreshDateList(nextDate); + } else { + // Since date transition to a date outside the max range is not allowed, move to the last allowed month + refreshDateList(scope.enableDatesTo.epochDate); + } + } }; scope.prevMonth = function () { - if (currentDate.getMonth() === 1) { - currentDate.setFullYear(currentDate.getFullYear()); + var prevDate = clearHMSM(new Date(currentDate)); + prevDate.setDate(1); + prevDate.setMonth(prevDate.getMonth() - 1); + if (earlierDateIsOk(prevDate)) { + refreshDateList(prevDate); } - currentDate.setMonth(currentDate.getMonth() - 1); - - scope.currentMonth = scope.monthsList[currentDate.getMonth()]; - scope.currentYear = currentDate.getFullYear(); - - refreshDateList(currentDate); }; scope.nextMonth = function () { - if (currentDate.getMonth() === 11) { - currentDate.setFullYear(currentDate.getFullYear()); + // new Date with a 0 for the days will translate into the last day of the previous month. So add 2 months with day 0 and we end up with the last day of the next month ;) + var nextDate = clearHMSM(new Date(currentDate.getFullYear(), currentDate.getMonth() + 2, 0)); + if (laterDateIsOk(nextDate)) { + refreshDateList(nextDate); } - currentDate.setMonth(currentDate.getMonth() + 1); - scope.currentMonth = scope.monthsList[currentDate.getMonth()]; - scope.currentYear = currentDate.getFullYear(); - refreshDateList(currentDate); }; - scope.date_selection = {selected: false, selectedDate: '', submitted: false}; - scope.date_selection.selected = true; - scope.date_selection.selectedDate = scope.ipDate; + scope.date_selection = {selected: true, selectedDate: scope.ipDate, submitted: false}; scope.dateSelected = function (date) { if (!date) return; @@ -223,14 +255,52 @@ } } + function clearHMSM(inputDate) { + inputDate.setHours(0); + inputDate.setMinutes(0); + inputDate.setSeconds(0); + inputDate.setMilliseconds(0); + return inputDate; + } + + function earlierDateIsOk(inputDate) { + // Check whether the input month is not smaller than the date the From (min) date + if (inputDate.getTime() < scope.enableDatesFrom.epoch) { + if (inputDate.getFullYear() < scope.enableDatesFrom.epochDate.getFullYear() || inputDate.getMonth() < scope.enableDatesFrom.epochDate.getMonth()) { + return false; + } + } + return true; + } + + // Check whether the input month is not greater than the date the To (max) date + function laterDateIsOk(inputDate) { + if (inputDate.getTime() > scope.enableDatesFrom.epoch) { + if (inputDate.getFullYear() > scope.enableDatesTo.epochDate.getFullYear() || (inputDate.getFullYear() === scope.enableDatesTo.epochDate.getFullYear() && inputDate.getMonth() > scope.enableDatesTo.epochDate.getMonth())) { + return false; + } + } + return true; + } + + // build the available months list based on enabled dates + function buildMonthList(inputDate) { + var result = []; + angular.forEach(scope.fullMonthsList, function (value, index) { + var checkDateFirst = new Date(inputDate); + checkDateFirst.setMonth(index); + checkDateFirst.setDate(1); + var checkDateLast = new Date(inputDate.getFullYear(), index + 1, 0); + if (earlierDateIsOk(checkDateFirst) && laterDateIsOk(checkDateLast)) { + this.push(value); + } + }, result); + return result; + } + //Called when the user clicks on the 'Today' button function todaySelected() { - var today = new Date(); - today.setHours(0); - today.setMinutes(0); - today.setSeconds(0); - today.setMilliseconds(0); - + var today = clearHMSM(new Date()); var tempEpoch = new Date(today.getFullYear(), today.getMonth(), today.getDate()); var todayObj = { date: today.getDate(), @@ -246,7 +316,7 @@ scope.selctedDateStringCopy = angular.copy(scope.selctedDateString); scope.date_selection.selected = true; scope.date_selection.selectedDate = new Date(todayObj.dateString); - refreshDateList(new Date()); + refreshDateList(today); } //Called when the user clicks on the 'Close' button of the modal @@ -321,7 +391,7 @@ $ionicPopup.show({ templateUrl: 'ionic-datepicker-popup.html', title: scope.titleLabel, - subTitle: '', + subTitle: scope.subTitleLabel, scope: scope, buttons: buttons }); @@ -330,5 +400,4 @@ } }; } - })(); diff --git a/src/ionic-datepicker.service.js b/src/ionic-datepicker.service.js index 02cd61ef..a622bd5f 100644 --- a/src/ionic-datepicker.service.js +++ b/src/ionic-datepicker.service.js @@ -1,37 +1,23 @@ //By Rajeshwar Patlolla - rajeshwar.patlolla@gmail.com //https://github.com/rajeshwarpatlolla -(function(){ - 'use strict'; +(function () { + 'use strict'; - angular.module('ionic-datepicker') - .service('IonicDatepickerService',IonicDatepickerService); + angular.module('ionic-datepicker') + .service('IonicDatepickerService', IonicDatepickerService); - IonicDatepickerService.$inject = []; - function IonicDatepickerService(){ - this.monthsList = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; - this.yearsList = [1900, - 1901, 1902, 1903, 1904, 1905, 1906, 1907, 1908, 1909, 1910, - 1911, 1912, 1913, 1914, 1915, 1916, 1917, 1918, 1919, 1920, - 1921, 1922, 1923, 1924, 1925, 1926, 1927, 1928, 1929, 1930, - 1931, 1932, 1933, 1934, 1935, 1936, 1937, 1938, 1939, 1940, - 1941, 1942, 1943, 1944, 1945, 1946, 1947, 1948, 1949, 1950, - 1951, 1952, 1953, 1954, 1955, 1956, 1957, 1958, 1959, 1960, - 1961, 1962, 1963, 1964, 1965, 1966, 1967, 1968, 1969, 1970, - 1971, 1972, 1973, 1974, 1975, 1976, 1977, 1978, 1979, 1980, - 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, - 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, - 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, - 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, - 2021, 2022, 2023, 2024, 2025, 2026, 2027, 2028, 2029, 2030, - 2031, 2032, 2033, 2034, 2035, 2036, 2037, 2038, 2039, 2040, - 2041, 2042, 2043, 2044, 2045, 2046, 2047, 2048, 2049, 2050, - 2051, 2052, 2053, 2054, 2055, 2056, 2057, 2058, 2059, 2060, - 2061, 2062, 2063, 2064, 2065, 2066, 2067, 2068, 2069, 2070, - 2071, 2072, 2073, 2074, 2075, 2076, 2077, 2078, 2079, 2080, - 2081, 2082, 2083, 2084, 2085, 2086, 2087, 2088, 2089, 2090, - 2091, 2092, 2093, 2094, 2095, 2096, 2097, 2098, 2099, 2100 - ]; - } - -})(); \ No newline at end of file + IonicDatepickerService.$inject = []; + function IonicDatepickerService() { + this.monthsList = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; + this.yearsList = function (from, to) { + var startYear = from.epochDate.getFullYear(); + var endYear = to.epochDate.getFullYear(); + var years = []; + for (var i = startYear; i <= endYear; i++) { + years.push(i); + } + return years; + } + } +})(); diff --git a/src/ionic-datepicker.styles.css b/src/ionic-datepicker.styles.css index 0e62c236..089ed6c4 100755 --- a/src/ionic-datepicker.styles.css +++ b/src/ionic-datepicker.styles.css @@ -6,7 +6,7 @@ } .color_blue { - color: rgb(56, 126, 245) !important; + color: rgb(56, 126, 245); } .bg_color_blue { @@ -32,7 +32,7 @@ } .date_selected { - background-color: rgba(56, 126, 245, 1) !important; + background-color: rgba(56, 126, 245, 1); } .today {