diff --git a/README.md b/README.md index cd6702c..842baab 100755 --- a/README.md +++ b/README.md @@ -2,106 +2,135 @@ ##Introduction: -This is a `ionic-timepicker` bower component which can be used with any Ionic framework's application. - -[View Demo](http://rajeshwarpatlolla.github.io/TimePickerForIonicFramework/demo/ "Demo") +This is an `ionic-timepicker` bower component, which can be used in any Ionic framework's application. No additional plugins are required for this component. +This plugin is completely open source. Please rate this plugin @ [Ionic Market](http://market.ionic.io/plugins/ionictimepicker) +[View Demo](http://rajeshwarpatlolla.github.io/TimePickerForIonicFramework/demo/ "Demo") ##Prerequisites. -1) node.js, npm, ionic, bower and gulp. +* node.js, npm +* ionic +* bower +* gulp ##How to use: -1) In your project repository install the ionic time picker using bower +1) In your project folder, please install this plugin using bower `bower install ionic-timepicker --save` -2) Give the path of `ionic-timepicker.bundle.min.js` in your `index.html` file. +This will install the latest version of `ionic-timepicker`. If you wish to install any specific version(eg : 0.4.0) then + +`bower install ionic-timepicker#0.4.0 --save` + +2) Specify the path of `ionic-timepicker.bundle.min.js` in your `index.html` file. ````html - + -```` - -3) In your application module inject the dependency `ionic-timepicker`, in order to work with the `ionic-timepicker` component +```` +3) In your application's main module, inject the dependency `ionic-timepicker`, in order to work with this plugin ````javascript -angular.module('modulename', ['ionic', 'ionic-timepicker']){ - +angular.module('mainModuleName', ['ionic', 'ionic-timepicker']){ +// } ```` -4) Use the below format in your template's corresponding controller +4) You can configure this time picker at application level in the config method using the `ionicTimePicker` provider. +Your config method may look like this if you wish to setup the configuration. But this is not mandatory step. ````javascript -$scope.timePickerObject = { - inputEpochTime: ((new Date()).getHours() * 60 * 60), //Optional - step: 15, //Optional - format: 12, //Optional - titleLabel: '12-hour Format', //Optional - setLabel: 'Set', //Optional - closeLabel: 'Close', //Optional - setButtonType: 'button-positive', //Optional - closeButtonType: 'button-stable', //Optional - callback: function (val) { //Mandatory - timePickerCallback(val); - } -}; +.config(function (ionicTimePickerProvider) { + var timePickerObj = { + inputTime: (((new Date()).getHours() * 60 * 60) + ((new Date()).getMinutes() * 60)), + format: 12, + step: 15, + setLabel: 'Set', + closeLabel: 'Close' + }; + ionicTimePickerProvider.configTimePicker(timePickerObj); + }) ```` +In the above code i am not configuring all the properties, but you can configure as many properties as you can. + +The properties you can configure are as follows. -**$scope.timePickerObject** is the object, that we need to pass to the directive. The properties of this object are as follows. +**a) inputTime**(Optional) : This is the input epoch time which we can pass to the component. You can give any valid epoch time. Default value is `(((new Date()).getHours() * 60 * 60) + ((new Date()).getMinutes() * 60))`. -**a) inputEpochTime** (Optional) : This the input epoch time to which the time will set initially. This is mandatory if you wish to show the time on the button, even before opening the popup. Default value is current time. +**b) format**(Optional) : This takes two values 12 or 24. If we give 12 as the value, then it will be `12` format time picker or else if you give `24` as the value, then it will be 24 hour format time picker. Default value is `12`. -**b) step** (Optional) : This the minute increment / decrement step. Default value is `15` +**c) step**(Optional) : This is the value which will be used to increment/decrement the values of the minutes. You can give any value like 10/15/20/30. Default value is `15`. -**c) format** (Optional) : This the format of the time. It can can two values i.e.`12` or `24`. Default value is `24` +**d) setLabel**(Optional) : The label for `Set` button. Default value is `Set` -**d) titleLabel** (Optional) : The `Title` for the popup. Default value is `Time Picker` +**e) closeLabel**(Optional) : The label for `Close` button. Default value is `Close` -**e) setLabel** (Optional) : The label for the `Set` button. Default value is `Set` +5) Inject `ionicTimePicker` in the controller, where you wish to use this component. Then using the below method you can call the timepicker. -**f) closeLabel** (Optional) : The label for the `Close` button. Default value is `Close` +````javascript +.controller('HomeCtrl', function ($scope, ionicTimePicker) { + + var ipObj1 = { + callback: function (val) { //Mandatory + if (typeof (val) === 'undefined') { + console.log('Time not selected'); + } else { + var selectedTime = new Date(val * 1000); + console.log('Selected epoch is : ', val, 'and the time is ', selectedTime.getUTCHours(), 'H :', selectedTime.getUTCMinutes(), 'M'); + } + }, + inputTime: 50400, //Optional + format: 12, //Optional + step: 15, //Optional + setLabel: 'Set2' //Optional + }; + + ionicTimePicker.openTimePicker(ipObj1); +}; +```` -**g) setButtonType** (Optional) : This the type of the `Set` button. Default value is `button-positive`. You can give any valid ionic framework's button classes. +Apart from the config method, you can re configure all options in the controller also. If you again set any of the properties, they will be overridden by the values mentioned in the controller. This will be useful if there are multiple time pickers in the app, which has different properties. -**h) closeButtonType** (Optional) : This the type of the `Close` button. Default value is `button-stable`. You can give any valid ionic framework's button classes. +In all the above steps, only mandatory property is the `callback` where you will get the selected time value. -**i) callback** (Mandatory) : This the callback function, which will get the selected time in to the controller. You can define this function as follows. -````javascript -function timePickerCallback(val) { - if (typeof (val) === 'undefined') { - console.log('Time not selected'); - } else { - var selectedTime = new Date(val * 1000); - console.log('Selected epoch is : ', val, 'and the time is ', selectedTime.getUTCHours(), ':', selectedTime.getUTCMinutes(), 'in UTC'); - } -} -```` + +##Screen Shots: -5) Then use the below format in your template / html file +Once you are successfully done with the above steps, you should be able to use this plugin. -````html - - - -```` +The first screen shot shows the popup and the second shows the modal of this plugin. -**a) ionic-timepicker** is the directive, to which we can pass required vales. +### iOS : + + -**b) input-obj** (Mandatory) : This is an object. We have to pass an object as shown above. +### Android : + + -[standard-time-meridian](https://github.com/rajeshwarpatlolla/my-angularjs-directives#standard-time-meridian 'standard-time-meridian') is the directive i am using here to show the time in string format instead of the epoch value. -You can also use any of my [directives](https://github.com/rajeshwarpatlolla/my-angularjs-directives) to convert the epoch time to string format. +##CSS Classes: -##Screen Shots: +###popup + -![12-Hour](https://lh6.googleusercontent.com/-UL18wuskI_A/VNHkGj8tdwI/AAAAAAAADdU/5tBbZcF6_es/w328-h494-no/TimePicker-1.jpg "12-Hour") -![24-Hour](https://lh5.googleusercontent.com/-xgqgH2zRSuA/VNHkGQ6R8cI/AAAAAAAADdQ/5gGJ1nUqmA0/w328-h494-no/TimePicker-2.jpg "24-Hour.") +#### 1) heading +#### 2) time_picker_arrows +#### 3) time_picker_box_text +#### 4) time_picker_colon +#### 5) button_set +#### 6) button_close + +You can use the below css class as the main class to customise popup. +####ionic_timepicker_popup + +The css class names for the buttons are as follows + +a) For `Set` button the class name is `button_set` + +b) For `Close` button the class name is `button_close` ##Versions: @@ -132,18 +161,22 @@ PR : [#54](https://github.com/rajeshwarpatlolla/ionic-timepicker/pull/54), Few additional enhancements added. +### 8) v0.5.0 +#### Features +a) You can configure the ionic-timepicker from the config method. + ##License: [MIT](https://github.com/rajeshwarpatlolla/ionic-timepicker/blob/master/LICENSE.MD "MIT") ##Contact: -gmail : rajeshwar.patlolla@gmail.com +Gmail : rajeshwar.patlolla@gmail.com -github : https://github.com/rajeshwarpatlolla +Github : https://github.com/rajeshwarpatlolla -twitter : https://twitter.com/rajeshwar_9032 +Twitter : https://twitter.com/rajeshwar_9032 -facebook : https://www.facebook.com/rajeshwarpatlolla +Facebook : https://www.facebook.com/rajeshwarpatlolla -paypal : rajeshwar.patlolla@gmail.com +Paypal : rajeshwar.patlolla@gmail.com -Rate it or Comment : http://market.ionic.io/plugins/ionictimepicker \ No newline at end of file +Comment or Rate it : http://market.ionic.io/plugins/ionictimepicker \ No newline at end of file diff --git a/bower.json b/bower.json index b903895..2d4fa01 100755 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "ionic-timepicker", - "version": "0.4.0", + "version": "0.5.0", "authors": [ "rajeshwarpatlolla " ], diff --git a/dist/ionic-timepicker.bundle.min.js b/dist/ionic-timepicker.bundle.min.js index a872726..2d94848 100644 --- a/dist/ionic-timepicker.bundle.min.js +++ b/dist/ionic-timepicker.bundle.min.js @@ -1 +1 @@ -!function(t,e){var i=t.createElement("style");if(t.getElementsByTagName("head")[0].appendChild(i),i.styleSheet)i.styleSheet.disabled||(i.styleSheet.cssText=e);else try{i.innerHTML=e}catch(n){i.innerText=e}}(document,"/* Empty. Add your own CSS if you like */\n\n.timePickerColon {\n padding-top: 40px;\n text-align: center;\n font-weight: bold;\n}\n\n.timePickerArrows {\n width: 100%;\n}\n\n.timePickerBoxText {\n height: 40px;\n text-align: center;\n border: 1px solid #dddddd;\n font-size: 16px;\n padding-top: 5px;\n}\n\n.overflowShow {\n white-space: normal !important;\n}"),function(t){try{t=angular.module("ionic-timepicker.templates")}catch(e){t=angular.module("ionic-timepicker.templates",[])}t.run(["$templateCache",function(t){t.put("ionic-timepicker-12-hour.html",'
')}])}(),function(t){try{t=angular.module("ionic-timepicker.templates")}catch(e){t=angular.module("ionic-timepicker.templates",[])}t.run(["$templateCache",function(t){t.put("ionic-timepicker-24-hour.html",'
')}])}(),function(){"use strict";angular.module("ionic-timepicker",["ionic","ionic-timepicker.templates"])}(),function(){"use strict";function t(t){return{restrict:"AE",replace:!0,scope:{inputObj:"=inputObj"},link:function(e,i,n){var o=(new Date,60*(new Date).getHours()*60+60*(new Date).getMinutes());e.inputEpochTime=e.inputObj.inputEpochTime?e.inputObj.inputEpochTime:o,e.step=e.inputObj.step?e.inputObj.step:15,e.format=e.inputObj.format?e.inputObj.format:24,e.titleLabel=e.inputObj.titleLabel?e.inputObj.titleLabel:"Time Picker",e.setLabel=e.inputObj.setLabel?e.inputObj.setLabel:"Set",e.closeLabel=e.inputObj.closeLabel?e.inputObj.closeLabel:"Close",e.setButtonType=e.inputObj.setButtonType?e.inputObj.setButtonType:"button-positive",e.closeButtonType=e.inputObj.closeButtonType?e.inputObj.closeButtonType:"button-stable";var s={epochTime:e.inputEpochTime,step:e.step,format:e.format};e.time={hours:0,minutes:0,meridian:""};var u=new Date(1e3*s.epochTime);e.increaseHours=function(){e.time.hours=Number(e.time.hours),12==s.format&&(12!=e.time.hours?e.time.hours+=1:e.time.hours=1),24==s.format&&(e.time.hours=(e.time.hours+1)%24),e.time.hours=e.time.hours<10?"0"+e.time.hours:e.time.hours},e.decreaseHours=function(){e.time.hours=Number(e.time.hours),12==s.format&&(e.time.hours>1?e.time.hours-=1:e.time.hours=12),24==s.format&&(e.time.hours=(e.time.hours+23)%24),e.time.hours=e.time.hours<10?"0"+e.time.hours:e.time.hours},e.increaseMinutes=function(){e.time.minutes=Number(e.time.minutes),e.time.minutes=(e.time.minutes+s.step)%60,e.time.minutes=e.time.minutes<10?"0"+e.time.minutes:e.time.minutes},e.decreaseMinutes=function(){e.time.minutes=Number(e.time.minutes),e.time.minutes=(e.time.minutes+(60-s.step))%60,e.time.minutes=e.time.minutes<10?"0"+e.time.minutes:e.time.minutes},e.changeMeridian=function(){e.time.meridian="AM"===e.time.meridian?"PM":"AM"},i.on("click",function(){u="undefined"==typeof e.inputObj.inputEpochTime||null===e.inputObj.inputEpochTime?new Date:new Date(1e3*e.inputObj.inputEpochTime),12==s.format?(e.time.meridian=u.getUTCHours()>=12?"PM":"AM",e.time.hours=u.getUTCHours()>12?u.getUTCHours()-12:u.getUTCHours(),e.time.minutes=u.getUTCMinutes(),e.time.hours=e.time.hours<10?"0"+e.time.hours:e.time.hours,e.time.minutes=e.time.minutes<10?"0"+e.time.minutes:e.time.minutes,0===e.time.hours&&"AM"===e.time.meridian&&(e.time.hours=12),t.show({templateUrl:"ionic-timepicker-12-hour.html",title:e.titleLabel,subTitle:"",scope:e,buttons:[{text:e.closeLabel,type:e.closeButtonType,onTap:function(t){e.inputObj.callback(void 0)}},{text:e.setLabel,type:e.setButtonType,onTap:function(t){e.loadingContent=!0;var i=0;i=12!=e.time.hours?60*e.time.hours*60+60*e.time.minutes:60*e.time.minutes,"AM"===e.time.meridian?i+=0:"PM"===e.time.meridian&&(i+=43200),e.etime=i,e.inputObj.callback(e.etime)}}]})):24==s.format&&(e.time.hours=u.getUTCHours(),e.time.minutes=u.getUTCMinutes(),e.time.hours=e.time.hours<10?"0"+e.time.hours:e.time.hours,e.time.minutes=e.time.minutes<10?"0"+e.time.minutes:e.time.minutes,t.show({templateUrl:"ionic-timepicker-24-hour.html",title:e.titleLabel,subTitle:"",scope:e,buttons:[{text:e.closeLabel,type:e.closeButtonType,onTap:function(t){e.inputObj.callback(void 0)}},{text:e.setLabel,type:e.setButtonType,onTap:function(t){e.loadingContent=!0;var i=0;i=24!=e.time.hours?60*e.time.hours*60+60*e.time.minutes:60*e.time.minutes,e.etime=i,e.inputObj.callback(e.etime)}}]}))})}}}angular.module("ionic-timepicker").directive("ionicTimepicker",t),t.$inject=["$ionicPopup"]}(); \ No newline at end of file +!function(i,e){var t=i.createElement("style");if(i.getElementsByTagName("head")[0].appendChild(t),t.styleSheet)t.styleSheet.disabled||(t.styleSheet.cssText=e);else try{t.innerHTML=e}catch(n){t.innerText=e}}(document,"/*\nTo customize the look and feel of Ionic, you can override the variables\nin ionic's _variables.scss file.\nFor example, you might change some of the default colors:\n*/\n.ionic_timepicker_popup .font_28px {\n font-size: 28px;\n}\n.ionic_timepicker_popup .margin_zero {\n margin: 0;\n}\n.ionic_timepicker_popup .padding_zero {\n padding: 0;\n}\n.ionic_timepicker_popup .popup {\n background-color: #ffffff;\n}\n.ionic_timepicker_popup .popup-head {\n display: none;\n}\n.ionic_timepicker_popup .popup-body {\n padding: 0;\n}\n.ionic_timepicker_popup .popup-buttons {\n padding: 0;\n min-height: 44px;\n height: 44px;\n}\n.ionic_timepicker_popup .popup-buttons .button:not(:last-child) {\n margin-right: 1px;\n}\n.ionic_timepicker_popup .padding_left_15px {\n padding-left: 15px;\n}\n.ionic_timepicker_popup .heading {\n height: 44px;\n background-color: #009688;\n color: #ffffff;\n text-align: center;\n line-height: 44px;\n font-size: 18px;\n font-weight: bold;\n}\n.ionic_timepicker_popup .time_picker_colon {\n padding-top: 45px;\n text-align: center;\n font-weight: bold;\n}\n.ionic_timepicker_popup .time_picker_arrows {\n width: 100%;\n}\n.ionic_timepicker_popup .time_picker_box_text {\n height: 40px;\n text-align: center;\n border: 1px solid #dddddd;\n font-size: 16px;\n line-height: 38px;\n}\n.ionic_timepicker_popup .overflowShow {\n white-space: normal !important;\n}\n.ionic_timepicker_popup .button_set, .ionic_timepicker_popup .button_close {\n background-color: #009688;\n color: #ffffff;\n}"),function(i){try{i=angular.module("ionic-timepicker.templates")}catch(e){i=angular.module("ionic-timepicker.templates",[])}i.run(["$templateCache",function(i){i.put("ionic-timepicker.html",'
{{time.hours}} : {{time.minutes}} {{time.meridian}}
')}])}(),angular.module("ionic-timepicker",["ionic-timepicker.provider","ionic-timepicker.templates"]),angular.module("ionic-timepicker.provider",[]).provider("ionicTimePicker",function(){var i={setLabel:"Set",closeLabel:"Close",inputTime:60*(new Date).getHours()*60+60*(new Date).getMinutes(),format:12,step:15};this.configTimePicker=function(e){angular.extend(i,e)},this.$get=["$rootScope","$ionicPopup",function(e,t){function n(i){return i.setHours(0),i.setMinutes(0),i.setSeconds(0),i.setMilliseconds(0),i}function o(i,e){r.time.hours=i/3600;var t=i%3600;12==e&&(r.time.hours>12?(r.time.hours-=12,r.time.meridian="PM"):r.time.meridian="AM"),r.time.minutes=t/60,r.time.hours=r.time.hours.toFixed(0),r.time.minutes=r.time.minutes.toFixed(0),1==r.time.hours.toString().length&&(r.time.hours="0"+r.time.hours),1==r.time.minutes.toString().length&&(r.time.minutes="0"+r.time.minutes),r.time.format=r.mainObj.format}var m={},r=e.$new();return r.today=n(new Date).getTime(),r.time={},r.increaseHours=function(){r.time.hours=Number(r.time.hours),12==r.mainObj.format&&(12!=r.time.hours?r.time.hours+=1:r.time.hours=1),24==r.mainObj.format&&(r.time.hours=(r.time.hours+1)%24),r.time.hours=r.time.hours<10?"0"+r.time.hours:r.time.hours},r.decreaseHours=function(){r.time.hours=Number(r.time.hours),12==r.mainObj.format&&(r.time.hours>1?r.time.hours-=1:r.time.hours=12),24==r.mainObj.format&&(r.time.hours=(r.time.hours+23)%24),r.time.hours=r.time.hours<10?"0"+r.time.hours:r.time.hours},r.increaseMinutes=function(){r.time.minutes=Number(r.time.minutes),r.time.minutes=(r.time.minutes+r.mainObj.step)%60,r.time.minutes=r.time.minutes<10?"0"+r.time.minutes:r.time.minutes},r.decreaseMinutes=function(){r.time.minutes=Number(r.time.minutes),r.time.minutes=(r.time.minutes+(60-r.mainObj.step))%60,r.time.minutes=r.time.minutes<10?"0"+r.time.minutes:r.time.minutes},r.changeMeridian=function(){r.time.meridian="AM"===r.time.meridian?"PM":"AM"},m.openTimePicker=function(e){var n=[];r.mainObj=angular.extend({},i,e),o(r.mainObj.inputTime,r.mainObj.format),n.push({text:r.mainObj.setLabel,type:"button_set",onTap:function(i){var e=0;12==r.time.format?("PM"==r.time.meridian&&(r.time.hours=Number(r.time.hours),r.time.hours+=12),e=60*r.time.hours*60+60*r.time.minutes):e=60*r.time.hours*60+60*r.time.minutes,r.mainObj.callback(e)}}),n.push({text:r.mainObj.closeLabel,type:"button_close"}),r.popup=t.show({templateUrl:"ionic-timepicker.html",scope:r,cssClass:"ionic_timepicker_popup",buttons:n})},m}]}); \ No newline at end of file diff --git a/package.json b/package.json index 278e70b..d412a4e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ionic-timepicker", - "version": "0.4.0", + "version": "0.5.0", "authors": [ "rajeshwarpatlolla " ], diff --git a/src/ionic-timepicker-12-hour.html b/src/ionic-timepicker-12-hour.html deleted file mode 100644 index 4119288..0000000 --- a/src/ionic-timepicker-12-hour.html +++ /dev/null @@ -1,29 +0,0 @@ -
-
- - -
- - - - - -
- - - - - -
- - -
-
\ No newline at end of file diff --git a/src/ionic-timepicker-24-hour.html b/src/ionic-timepicker-24-hour.html deleted file mode 100644 index b658e39..0000000 --- a/src/ionic-timepicker-24-hour.html +++ /dev/null @@ -1,21 +0,0 @@ -
-
- - -
- - - - - -
- - -
-
\ No newline at end of file diff --git a/src/ionic-timepicker.app.js b/src/ionic-timepicker.app.js deleted file mode 100644 index 4134c3e..0000000 --- a/src/ionic-timepicker.app.js +++ /dev/null @@ -1,9 +0,0 @@ -//By Rajeshwar Patlolla -//https://github.com/rajeshwarpatlolla - -(function () { - 'use strict'; - - angular.module('ionic-timepicker', ['ionic','ionic-timepicker.templates']) - -})(); \ No newline at end of file diff --git a/src/ionic-timepicker.directive.js b/src/ionic-timepicker.directive.js deleted file mode 100644 index fc67483..0000000 --- a/src/ionic-timepicker.directive.js +++ /dev/null @@ -1,194 +0,0 @@ -//By Rajeshwar Patlolla -//https://github.com/rajeshwarpatlolla - -(function () { - 'use strict'; - - angular.module('ionic-timepicker') - .directive('ionicTimepicker', ionicTimepicker); - - ionicTimepicker.$inject = ['$ionicPopup']; - function ionicTimepicker($ionicPopup) { - return { - restrict: 'AE', - replace: true, - scope: { - inputObj: "=inputObj" - }, - link: function (scope, element, attrs) { - - var today = new Date(); - var currentEpoch = ((new Date()).getHours() * 60 * 60) + ((new Date()).getMinutes() * 60); - - //set up base variables and options for customization - scope.inputEpochTime = scope.inputObj.inputEpochTime ? scope.inputObj.inputEpochTime : currentEpoch; - scope.step = scope.inputObj.step ? scope.inputObj.step : 15; - scope.format = scope.inputObj.format ? scope.inputObj.format : 24; - scope.titleLabel = scope.inputObj.titleLabel ? scope.inputObj.titleLabel : 'Time Picker'; - scope.setLabel = scope.inputObj.setLabel ? scope.inputObj.setLabel : 'Set'; - scope.closeLabel = scope.inputObj.closeLabel ? scope.inputObj.closeLabel : 'Close'; - scope.setButtonType = scope.inputObj.setButtonType ? scope.inputObj.setButtonType : 'button-positive'; - scope.closeButtonType = scope.inputObj.closeButtonType ? scope.inputObj.closeButtonType : 'button-stable'; - - var obj = {epochTime: scope.inputEpochTime, step: scope.step, format: scope.format}; - scope.time = {hours: 0, minutes: 0, meridian: ""}; - var objDate = new Date(obj.epochTime * 1000); // Epoch time in milliseconds. - - //Increasing the hours - scope.increaseHours = function () { - scope.time.hours = Number(scope.time.hours); - if (obj.format == 12) { - if (scope.time.hours != 12) { - scope.time.hours += 1; - } else { - scope.time.hours = 1; - } - } - if (obj.format == 24) { - scope.time.hours = (scope.time.hours + 1) % 24; - } - scope.time.hours = (scope.time.hours < 10) ? ('0' + scope.time.hours) : scope.time.hours; - }; - - //Decreasing the hours - scope.decreaseHours = function () { - scope.time.hours = Number(scope.time.hours); - if (obj.format == 12) { - if (scope.time.hours > 1) { - scope.time.hours -= 1; - } else { - scope.time.hours = 12; - } - } - if (obj.format == 24) { - scope.time.hours = (scope.time.hours + 23) % 24; - } - scope.time.hours = (scope.time.hours < 10) ? ('0' + scope.time.hours) : scope.time.hours; - }; - - //Increasing the minutes - scope.increaseMinutes = function () { - scope.time.minutes = Number(scope.time.minutes); - scope.time.minutes = (scope.time.minutes + obj.step) % 60; - scope.time.minutes = (scope.time.minutes < 10) ? ('0' + scope.time.minutes) : scope.time.minutes; - }; - - //Decreasing the minutes - scope.decreaseMinutes = function () { - scope.time.minutes = Number(scope.time.minutes); - scope.time.minutes = (scope.time.minutes + (60 - obj.step)) % 60; - scope.time.minutes = (scope.time.minutes < 10) ? ('0' + scope.time.minutes) : scope.time.minutes; - }; - - //Changing the meridian - scope.changeMeridian = function () { - scope.time.meridian = (scope.time.meridian === "AM") ? "PM" : "AM"; - }; - - //onclick of the button - element.on("click", function () { - if (typeof scope.inputObj.inputEpochTime === 'undefined' || scope.inputObj.inputEpochTime === null) { - objDate = new Date(); - } else { - objDate = new Date(scope.inputObj.inputEpochTime * 1000); - } - - if (obj.format == 12) { - scope.time.meridian = (objDate.getUTCHours() >= 12) ? "PM" : "AM"; - scope.time.hours = (objDate.getUTCHours() > 12) ? ((objDate.getUTCHours() - 12)) : (objDate.getUTCHours()); - scope.time.minutes = (objDate.getUTCMinutes()); - - scope.time.hours = (scope.time.hours < 10) ? ("0" + scope.time.hours) : (scope.time.hours); - scope.time.minutes = (scope.time.minutes < 10) ? ("0" + scope.time.minutes) : (scope.time.minutes); - - if (scope.time.hours === 0 && scope.time.meridian === "AM") { - scope.time.hours = 12; - } - - $ionicPopup.show({ - templateUrl: 'ionic-timepicker-12-hour.html', - title: scope.titleLabel, - subTitle: '', - scope: scope, - buttons: [ - { - text: scope.closeLabel, - type: scope.closeButtonType, - onTap: function (e) { - scope.inputObj.callback(undefined); - } - }, - { - text: scope.setLabel, - type: scope.setButtonType, - onTap: function (e) { - scope.loadingContent = true; - - var totalSec = 0; - - if (scope.time.hours != 12) { - totalSec = (scope.time.hours * 60 * 60) + (scope.time.minutes * 60); - } else { - totalSec = scope.time.minutes * 60; - } - - if (scope.time.meridian === "AM") { - totalSec += 0; - } else if (scope.time.meridian === "PM") { - totalSec += 43200; - } - scope.etime = totalSec; - scope.inputObj.callback(scope.etime); - } - } - ] - }); - - } else if (obj.format == 24) { - - scope.time.hours = (objDate.getUTCHours()); - scope.time.minutes = (objDate.getUTCMinutes()); - - scope.time.hours = (scope.time.hours < 10) ? ("0" + scope.time.hours) : (scope.time.hours); - scope.time.minutes = (scope.time.minutes < 10) ? ("0" + scope.time.minutes) : (scope.time.minutes); - - $ionicPopup.show({ - templateUrl: 'ionic-timepicker-24-hour.html', - title: scope.titleLabel, - subTitle: '', - scope: scope, - buttons: [ - { - text: scope.closeLabel, - type: scope.closeButtonType, - onTap: function (e) { - scope.inputObj.callback(undefined); - } - }, - { - text: scope.setLabel, - type: scope.setButtonType, - onTap: function (e) { - - scope.loadingContent = true; - - var totalSec = 0; - - if (scope.time.hours != 24) { - totalSec = (scope.time.hours * 60 * 60) + (scope.time.minutes * 60); - } else { - totalSec = scope.time.minutes * 60; - } - scope.etime = totalSec; - scope.inputObj.callback(scope.etime); - } - } - ] - }); - } - }); - } - }; - } - -})(); diff --git a/src/ionic-timepicker.html b/src/ionic-timepicker.html new file mode 100644 index 0000000..b5730e2 --- /dev/null +++ b/src/ionic-timepicker.html @@ -0,0 +1,32 @@ +
+
{{time.hours}} : {{time.minutes}} {{time.meridian}}
+
+
+ +
+ +
+ + +
+ +
+ +
+ + +
+ +
+ +
+
+
\ No newline at end of file diff --git a/src/ionic-timepicker.module.js b/src/ionic-timepicker.module.js new file mode 100644 index 0000000..fd47d19 --- /dev/null +++ b/src/ionic-timepicker.module.js @@ -0,0 +1,4 @@ +angular.module('ionic-timepicker', [ + 'ionic-timepicker.provider', + //'ionic-timepicker.templates' +]); \ No newline at end of file diff --git a/src/ionic-timepicker.provider.js b/src/ionic-timepicker.provider.js new file mode 100644 index 0000000..62adb71 --- /dev/null +++ b/src/ionic-timepicker.provider.js @@ -0,0 +1,153 @@ +angular.module('ionic-timepicker.provider', []) + + .provider('ionicTimePicker', function () { + + var config = { + setLabel: 'Set', + closeLabel: 'Close', + inputTime: (((new Date()).getHours() * 60 * 60) + ((new Date()).getMinutes() * 60)), + format: 12, + step: 15 + }; + + this.configTimePicker = function (inputObj) { + angular.extend(config, inputObj); + }; + + this.$get = ['$rootScope', '$ionicPopup', function ($rootScope, $ionicPopup) { + + var provider = {}; + var $scope = $rootScope.$new(); + $scope.today = resetHMSM(new Date()).getTime(); + $scope.time = {}; + + //Reset the hours, minutes, seconds and milli seconds + function resetHMSM(currentDate) { + currentDate.setHours(0); + currentDate.setMinutes(0); + currentDate.setSeconds(0); + currentDate.setMilliseconds(0); + return currentDate; + } + + + //Increasing the hours + $scope.increaseHours = function () { + $scope.time.hours = Number($scope.time.hours); + if ($scope.mainObj.format == 12) { + if ($scope.time.hours != 12) { + $scope.time.hours += 1; + } else { + $scope.time.hours = 1; + } + } + if ($scope.mainObj.format == 24) { + $scope.time.hours = ($scope.time.hours + 1) % 24; + } + $scope.time.hours = ($scope.time.hours < 10) ? ('0' + $scope.time.hours) : $scope.time.hours; + }; + + //Decreasing the hours + $scope.decreaseHours = function () { + $scope.time.hours = Number($scope.time.hours); + if ($scope.mainObj.format == 12) { + if ($scope.time.hours > 1) { + $scope.time.hours -= 1; + } else { + $scope.time.hours = 12; + } + } + if ($scope.mainObj.format == 24) { + $scope.time.hours = ($scope.time.hours + 23) % 24; + } + $scope.time.hours = ($scope.time.hours < 10) ? ('0' + $scope.time.hours) : $scope.time.hours; + }; + + //Increasing the minutes + $scope.increaseMinutes = function () { + $scope.time.minutes = Number($scope.time.minutes); + $scope.time.minutes = ($scope.time.minutes + $scope.mainObj.step) % 60; + $scope.time.minutes = ($scope.time.minutes < 10) ? ('0' + $scope.time.minutes) : $scope.time.minutes; + }; + + //Decreasing the minutes + $scope.decreaseMinutes = function () { + $scope.time.minutes = Number($scope.time.minutes); + $scope.time.minutes = ($scope.time.minutes + (60 - $scope.mainObj.step)) % 60; + $scope.time.minutes = ($scope.time.minutes < 10) ? ('0' + $scope.time.minutes) : $scope.time.minutes; + }; + + //Changing the meridian + $scope.changeMeridian = function () { + $scope.time.meridian = ($scope.time.meridian === "AM") ? "PM" : "AM"; + }; + + function setMinSecs(ipTime, format) { + $scope.time.hours = ipTime / (60 * 60); + + var rem = ipTime % (60 * 60); + if (format == 12) { + if ($scope.time.hours > 12) { + $scope.time.hours -= 12; + $scope.time.meridian = 'PM'; + } else { + $scope.time.meridian = 'AM'; + } + } + $scope.time.minutes = rem / 60; + + $scope.time.hours = $scope.time.hours.toFixed(0); + $scope.time.minutes = $scope.time.minutes.toFixed(0); + + if ($scope.time.hours.toString().length == 1) { + $scope.time.hours = '0' + $scope.time.hours; + } + if ($scope.time.minutes.toString().length == 1) { + $scope.time.minutes = '0' + $scope.time.minutes; + } + $scope.time.format = $scope.mainObj.format; + } + + provider.openTimePicker = function (ipObj) { + var buttons = []; + $scope.mainObj = angular.extend({}, config, ipObj); + setMinSecs($scope.mainObj.inputTime, $scope.mainObj.format); + + buttons.push({ + text: $scope.mainObj.setLabel, + type: 'button_set', + onTap: function (e) { + var totalSec = 0; + + if ($scope.time.format == 12) { + if ($scope.time.meridian == 'PM') { + $scope.time.hours = Number($scope.time.hours); + $scope.time.hours += 12; + } + totalSec = ($scope.time.hours * 60 * 60) + ($scope.time.minutes * 60); + } else { + totalSec = ($scope.time.hours * 60 * 60) + ($scope.time.minutes * 60); + } + $scope.mainObj.callback(totalSec); + } + }); + + buttons.push({ + text: $scope.mainObj.closeLabel, + type: 'button_close' + }); + + $scope.popup = $ionicPopup.show({ + templateUrl: 'ionic-timepicker.html', + scope: $scope, + cssClass: 'ionic_timepicker_popup', + buttons: buttons + }); + + }; + + return provider; + + }]; + + }); \ No newline at end of file diff --git a/src/ionic-timepicker.styles.css b/src/ionic-timepicker.styles.css index aedfd7e..d97ed6a 100644 --- a/src/ionic-timepicker.styles.css +++ b/src/ionic-timepicker.styles.css @@ -1,23 +1,65 @@ -/* Empty. Add your own CSS if you like */ - -.timePickerColon { - padding-top: 40px; +/* +To customize the look and feel of Ionic, you can override the variables +in ionic's _variables.scss file. +For example, you might change some of the default colors: +*/ +.ionic_timepicker_popup .font_28px { + font-size: 28px; +} +.ionic_timepicker_popup .margin_zero { + margin: 0; +} +.ionic_timepicker_popup .padding_zero { + padding: 0; +} +.ionic_timepicker_popup .popup { + background-color: #ffffff; +} +.ionic_timepicker_popup .popup-head { + display: none; +} +.ionic_timepicker_popup .popup-body { + padding: 0; +} +.ionic_timepicker_popup .popup-buttons { + padding: 0; + min-height: 44px; + height: 44px; +} +.ionic_timepicker_popup .popup-buttons .button:not(:last-child) { + margin-right: 1px; +} +.ionic_timepicker_popup .padding_left_15px { + padding-left: 15px; +} +.ionic_timepicker_popup .heading { + height: 44px; + background-color: #009688; + color: #ffffff; + text-align: center; + line-height: 44px; + font-size: 18px; + font-weight: bold; +} +.ionic_timepicker_popup .time_picker_colon { + padding-top: 45px; text-align: center; font-weight: bold; } - -.timePickerArrows { +.ionic_timepicker_popup .time_picker_arrows { width: 100%; } - -.timePickerBoxText { +.ionic_timepicker_popup .time_picker_box_text { height: 40px; text-align: center; border: 1px solid #dddddd; font-size: 16px; - padding-top: 5px; + line-height: 38px; } - -.overflowShow { +.ionic_timepicker_popup .overflowShow { white-space: normal !important; } +.ionic_timepicker_popup .button_set, .ionic_timepicker_popup .button_close { + background-color: #009688; + color: #ffffff; +}