{"id":14985801,"url":"https://github.com/rajeshwarpatlolla/ionic-timepicker","last_synced_at":"2025-04-05T00:07:38.148Z","repository":{"id":27277998,"uuid":"30751264","full_name":"rajeshwarpatlolla/ionic-timepicker","owner":"rajeshwarpatlolla","description":"'ionic-timepicker' bower component for ionic framework applications","archived":false,"fork":false,"pushed_at":"2019-11-02T16:32:42.000Z","size":157,"stargazers_count":284,"open_issues_count":12,"forks_count":160,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-03-28T23:05:51.987Z","etag":null,"topics":["angular","hybridapp","ionic","timepicker"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rajeshwarpatlolla.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.MD","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"custom":["https://www.paypal.me/rajeshwarpatlolla"]}},"created_at":"2015-02-13T10:14:43.000Z","updated_at":"2024-07-08T02:34:44.000Z","dependencies_parsed_at":"2022-07-25T17:22:09.418Z","dependency_job_id":null,"html_url":"https://github.com/rajeshwarpatlolla/ionic-timepicker","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajeshwarpatlolla%2Fionic-timepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajeshwarpatlolla%2Fionic-timepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajeshwarpatlolla%2Fionic-timepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajeshwarpatlolla%2Fionic-timepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rajeshwarpatlolla","download_url":"https://codeload.github.com/rajeshwarpatlolla/ionic-timepicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247266563,"owners_count":20910836,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","hybridapp","ionic","timepicker"],"created_at":"2024-09-24T14:11:42.252Z","updated_at":"2025-04-05T00:07:38.131Z","avatar_url":"https://github.com/rajeshwarpatlolla.png","language":"JavaScript","funding_links":["https://www.paypal.me/rajeshwarpatlolla"],"categories":[],"sub_categories":[],"readme":"[![bitHound Score](https://www.bithound.io/github/rajeshwarpatlolla/ionic-timepicker/badges/score.svg)](https://www.bithound.io/github/rajeshwarpatlolla/ionic-timepicker)\n\n##Introduction:\n\nThis is an `ionic-timepicker` bower component, which can be used in any Ionic framework's application. No additional plugins are required for this component.\nThis plugin is completely open source. Please rate this plugin @ [Ionic Market](http://market.ionic.io/plugins/ionictimepicker)\n\nFrom version 0.5.0, this component has got so many new features and the way you should use is different from the older versions of this component. If you wish to see the documentation for the previous versions of this component, please check the [previous releases](https://github.com/rajeshwarpatlolla/ionic-timepicker/releases)\n\n[View Demo](http://rajeshwarpatlolla.github.io/TimePickerForIonicFramework/demo/ \"Demo\")\n\n##Prerequisites.\n\n* node.js, npm\n* ionic\n* bower\n* gulp\n\n##How to use:\n\n1) In your project folder, please install this plugin using bower\n\n`bower install ionic-timepicker --save`\n\nThis will install the latest version of `ionic-timepicker`. If you wish to install any specific version(eg : 0.4.0) then\n \n`bower install ionic-timepicker#0.4.0 --save`\n\n2) Specify the path of  `ionic-timepicker.bundle.min.js` in your `index.html` file.\n\n````html\n\u003c!-- path to ionic --\u003e\n\u003cscript src=\"lib/ionic-timepicker/dist/ionic-timepicker.bundle.min.js\"\u003e\u003c/script\u003e\n````\n\n3) In your application's main module, inject the dependency `ionic-timepicker`, in order to work with this plugin\n````javascript\nangular.module('mainModuleName', ['ionic', 'ionic-timepicker']){\n//\n}\n````\n\n4) You can configure this time picker at application level in the config method using the `ionicTimePicker` provider.\nYour config method may look like this if you wish to setup the configuration. But this is not mandatory step.\n\n````javascript\n.config(function (ionicTimePickerProvider) {\n    var timePickerObj = {\n      inputTime: (((new Date()).getHours() * 60 * 60) + ((new Date()).getMinutes() * 60)),\n      format: 12,\n      step: 15,\n      setLabel: 'Set',\n      closeLabel: 'Close'\n    };\n    ionicTimePickerProvider.configTimePicker(timePickerObj);\n  })\n````\nIn the above code i am not configuring all the properties, but you can configure as many properties as you can.\n \nThe properties you can configure are as follows.\n\n**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))`.\n\n**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`.\n\n**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`.\n\n**d) setLabel**(Optional) : The label for `Set` button. Default value is `Set`\n\n**e) closeLabel**(Optional) : The label for `Close` button. Default value is `Close`\n\n5) Inject `ionicTimePicker` in the controller, where you wish to use this component. Then using the below method you can call the timepicker.\n\n````javascript\n.controller('HomeCtrl', function ($scope, ionicTimePicker) {\n\n  var ipObj1 = {\n    callback: function (val) {      //Mandatory\n      if (typeof (val) === 'undefined') {\n        console.log('Time not selected');\n      } else {\n        var selectedTime = new Date(val * 1000);\n        console.log('Selected epoch is : ', val, 'and the time is ', selectedTime.getUTCHours(), 'H :', selectedTime.getUTCMinutes(), 'M');\n      }\n    },\n    inputTime: 50400,   //Optional\n    format: 12,         //Optional\n    step: 15,           //Optional\n    setLabel: 'Set2'    //Optional\n  };\n  \n  ionicTimePicker.openTimePicker(ipObj1);\n};\n````\n\nApart 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.\n\nIn all the above steps, only mandatory property is the `callback` where you will get the selected time value.\n\n    \n##Screen Shots:\n\nOnce you are successfully done with the above steps, you should be able to use this plugin.\n\nThe first screen shot shows the popup and the second shows the modal of this plugin.\n\n### iOS : \n\u003cimg src=\"https://lh3.googleusercontent.com/RZmHEf19w3ZozSeIivFYzKfhQAydDPA7xfGgZHzPadYNG32_BpeFnQRin6LTapfzf1asljfxEpV48GpGoU8g1NPOaL-ya10lno1L4Mjefz41FeWCIoW1um5BO1Lu0dRhbgvmUA_C_Q9YiZf6V8MDjAqyNNFkKpdjNDOh3qDPmi1v-XmG9Q-E40G1kdqxDrWMOIF1zhzmpzKaYE35Hp02-eHavfse25J64oyTxoXW1qKFa3yyacPFAs8UkMvJLNjXAryRpVtQwfbkCbac88jgckXAuAeDo7RTMjcT9J0PYufXutT5RlkEr3KMAJqrUSQpoe__iKBSmJCfCcOplVMvRcFUuHq7_4IwJtbqUvWNgL68kgeWsR8HWbBJY5u1uDg3DBuiWWfnKhS1oFu5imjLwfHshsOTT-mjV-VicK_pvcXtaFjkUGdtx436A1JsYN-3QyxqaYHnoedIT1GvKZTiJYNU6_qbUdTfQIZu5s0XPE1ALe56Hhs14zNqcdDYGGa3eyCuyD8qx8LExJZvHtJlJohTJQOUNkSfCKgKItjU6d3LjGpeNmVL9xAKb7UJ9hadqx0Z=w382-h678-no\" width=\"320\" height=\"568\" /\u003e\n\u003cimg src=\"https://lh3.googleusercontent.com/eHFdHG7yAQlVUlARm-i4i0RXje1SBZAAswiYH8-ml-w2nYCPrjQF96qcWpp8ZQwU-Zn4QBkZLJ4kWXGjVJ-kQjTbYvO9KMU4m3LbsA8-iVUPtWbbAHZWSBpaFTmZTvaL4ssCYG1YEZF1tVBHxOkl2Nvunxi4jHjzN1VYLng4fPXc_H2ORGkx93Ns-7rgtaIrbofd36mnUChmkICPMgHa-mitLHe7pBoMQQsWF3IqpFmb8X6NAOHMix5BcGIYMtGYig1iZgY3U1ppPSu6u67sq3b3HKJfAsR12x7CK4uZyUGmv5t3V6O7bKW4qwlqyq9Q7Xw_wJ_RL4YI874daIdLYxnIwv2406Fiz8CvJSHTHyznsBONvPMH58FOjOUjreHemUxGqh3CsaZaNFHPjEV1tQJTYBwe4tlUNbDU3iaJACqyTAMjj93HD-LJDxrbMUBgQKVFshF0i_SCfvid96JiHfiw0t6udFU3V26Gm80FpNb5XRfvsDNNpnY35U0Ei5HMigy2_Tb4LeFppsFjo0oNRW5o_ncGUkjdWl7M-fWNK4G9lljmg8zvPD4AP8QIbU-iWkAx=w382-h678-no\" width=\"320\" height=\"568\" /\u003e\n\n### Android : \n\u003cimg src=\"https://lh3.googleusercontent.com/E6lLfSOet7X5jNIRfS-OAkbi2783d7lVjc__xkVXa6AgWz-Rhqb0RQF0Zlez_JC4k5FSfGTZerO0fmUjx626fOSBTs78R8wE19U67sHeKss19qHqU5pt84loNyXOHKLa2iNYT9BnN0hrpVQYdg65c9vhQyeqTBmuz79TehSnsh3kj_ZfQb8juLkYkkWPXkAwKu7iErPG0SbHSutX_EiEtu89Hr1YClXQDDb0U_ca_7kBUFei8KVtwce9qAnGvWnZVNq_bzRO9pDGWDhsFv2tZg5986S8MVC0SgmzsBtwCKGkJIth_nGOSR1ezzLTFcIiWJ8mjMi5twYJ1gWgVG7aDl3T3JF0-Z_FI3AVE7R4xY3_1_Z3r6p7UoGGNfq7oi5n3pJobC80m-SfQYf3Am3Db-zy1n-QxuQQrNTsJFmjQ-YeWX9O-0H07xpPgzUVWNk7ybqzHDj9gSAhaUIlZ0P5de0CEVkmse3fDskHcJaUUiuLLg7GRjfeUO80dNTAXPapkbIGqeXR1bVCPoYSYS1BE4gXqVcaF02eZN2AfPr6-XtLmmNa-rvvNVo0-nSG93onkMhi=w382-h678-no\" width=\"360\" height=\"640\" /\u003e\n\u003cimg src=\"https://lh3.googleusercontent.com/d2dRpy0mZ-ivfy48bfXxH8oXQ2w3L21evHZstdTc5Z2z4ukYlSakGAFdnnNJknGx_zRgdUFC5AcTUWO9XyccTc-qzEbnwEq9Kqd6JSH1YKGDhrK0zsx1qGrtn1MNlg2Fa9TUjt_U8SlGQEWin5h8Zqyp93bevDHe_15KS5pXp7WHjpI-eZtWJqUOObnnY5e_54cbx5Rw3Veh25nhYQUyPxIMaHDMr-dUyOKhxVP1dz7keAjD9vqH1XJwX6kkCNSSn-DeZOG6vXqjOgPlv1FQpkG7uEc2Y84bIbBqFcIR5XSIDBppPYpt_tDs20-ZgDLoY7-59mXEnclS9OZlFcTN_SCHsEjQ8NTsXh8jiJWSQsVx0UF2xumCjd8sLLGx3slv2xYv4KuEtzW5fKsgpeEKFheXnwBtLzxwqavlATNe2x3QWLHekR2eFCDpaGhU_m-aCoo-CD-Fpil-VihqhAcJOYBthPdDdgUhahNJHaJaShN1SNj4faoYIUGNboAsmJNcK92448BlH8NUTSWScu3s1tP3W9xd1DDjUlVaNbIyMPpEITNBHAyvzOn5Ddqpa54sPVbJ=w382-h678-no\" width=\"360\" height=\"640\" /\u003e\n\n\n##CSS Classes:\n\n###popup\n\u003cimg src=\"https://lh3.googleusercontent.com/L4aOxCEmBSduhkmWfrsQmA0UU3eD6-fg1VDjy-uU_ck09bspdsz_ytleW2KrzlZCy3jbFOPS_3SBlkp72SKj2DyjHMS5Eh3YRQFxe32EBU8GmufDHSaqFgjfAvqx4eJMfXsJtdfGD9v_eL-x_7fVg2nUjvNppJ3kY0XxxcbYysTxKFfnMaF40oCGXE1Uj8Dknz_mNVdtPAJeVAgVMxsuGH-zgQWVvoD5DMIgZ0unclt8DakU6N_ZBTZsrPdDPWV6yENUkWaUPmc_YsN53Pzw_h_hg-Oi34GvDyqhIEmvANCMuv6tH9NKSCoxra9dfhtjpa8sfEPfBcG5VLNDkTdnbfeqGGkwf1wTA9aYKrul682aDu84qJAA0jFp3wQvIuToAbpjlZa14MDjBh6wccev4zLt9z8sL10OK_7--0tPq-vCNt5ZlVIoHOA5tVt-lltUP9ZC2PzJRs2GhUVz9pXGi0rSmm06-gFZzb3ycH3nAf_VPlYidb9Znq7QGnWnAvaLdfKyWMDYJVtYuIdkjlFy8SfD5vVROFuXZzW9d9IxjrxOXNQ41sWN5j37UufW0TDaAZrL=w382-h678-no\" width=\"360\" height=\"640\" /\u003e\n\n#### 1) heading\n#### 2) time_picker_arrows \n#### 3) time_picker_box_text\n#### 4) time_picker_colon\n#### 5) button_set\n#### 6) button_close\n\nYou can use the below css class as the main class to customise popup.  \n####ionic_timepicker_popup\n\nThe css class names for the buttons are as follows\n\na) For `Set` button the class name is `button_set` \n\nb) For `Close` button the class name is `button_close` \n\n##Versions:\n\n### 1) v0.1.0\nThe whole time picker functionality has been implemented, and can be installed with \n\nbower install ionic-timepicker --save\n\n### 2) v0.1.1\nDirective name has been modified.\n\n### 3) v0.1.2\nIf the minutes and hours are less than 10, then 0 will be prepended to the value of minutes/hours.\n\n### 4) v0.2.0\nCallback function added to get the selected time in to the controller.\n\n### 5) v0.2.1\nClass names modified as per [this bug](https://github.com/rajeshwarpatlolla/ionic-timepicker/issues/41).\n\n### 6) v0.3.0\nFeatures added to customize this component.\n\n### 7) v0.4.0\n#### Bug fixes : [#48](https://github.com/rajeshwarpatlolla/ionic-timepicker/issues/48), [#53](https://github.com/rajeshwarpatlolla/ionic-timepicker/issues/53), [#51](https://github.com/rajeshwarpatlolla/ionic-timepicker/issues/51)\n\n#### PR : [#54](https://github.com/rajeshwarpatlolla/ionic-timepicker/pull/54), \n\nFew additional enhancements added. \n\n### 8) v0.5.0\n#### Features\na) You can configure the ionic-timepicker from the config method. \n\n### 9) v0.5.1\n#### BugFix : [#75](https://github.com/rajeshwarpatlolla/ionic-timepicker/issues/75)\n\n### 10) v0.6.0\n#### BugFixes : [#80](https://github.com/rajeshwarpatlolla/ionic-timepicker/issues/80), [#86](https://github.com/rajeshwarpatlolla/ionic-timepicker/issues/86)\n\n\n##License:\n[MIT](https://github.com/rajeshwarpatlolla/ionic-timepicker/blob/master/LICENSE.MD \"MIT\")\n\n##Contact:\nGmail : rajeshwar.patlolla@gmail.com\n\nGithub : https://github.com/rajeshwarpatlolla\n\nTwitter : https://twitter.com/rajeshwar_9032\n\nFacebook : https://www.facebook.com/rajeshwarpatlolla\n\nPaypal : rajeshwar.patlolla@gmail.com\n\nComment or Rate it : http://market.ionic.io/plugins/ionictimepicker","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajeshwarpatlolla%2Fionic-timepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frajeshwarpatlolla%2Fionic-timepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajeshwarpatlolla%2Fionic-timepicker/lists"}