Ion Time Picker

Ion Time Picker

time picker

$9.00

Not yet rated
Ophir Stern

Ophir Stern

Member since 2015

Details

Version:
1.2.0
Size:
0mb
Ionic:
1.0 beta,1.0.x,1.3.x
Platforms:
iOS, Android
Released:
8 years ago
Updated:
8 years ago
Category:
Plugins
Tags:
time picker, ionic, plugin, spinner

ionic time picker (spinner) plugin for android and iOS, developed as an angular directive.

Features Include:

  • Works with iOS and Android.

  • Compatible and easy to use with your existing app DOM code and elements with an addition of a few attributes to activate directive.

  • Very easy to use.

  • This component is part of the ion-picker package (ion-number-picker, ion-time-picker, ion-select-picker)

Check out https://github.com/souly1/ion-time-picker/ for details use and info

    • includes a detailed read for use, minimized js file and minimized css

Hey there! You'll need to log in before you can leave a comment here.

Stewart Hering

Stewart Hering   ·   8 years ago

I have a few questions about usage... One. How do I setup the time picker to be a 24 hour picker? Two. What are the css classes to edit the elements of the time picker to design a custom look? Please do answer quickly. This would be an amazing plugin if it were better documented and I did nit need to ask these questions.

Ophir Stern

Ophir Stern   ·   8 years ago

Hi Stawart, thanks for the post. If you look at (https://github.com/souly1/ion-time-picker) you're can see the documentation for using the component. Specifically, what you are asking for (24h) is set by setting attribute isWithDaytime to false. Regarding the css classes it really depends which part you require to give a custom look as there are several component, what was used thus far by other customers is with a web browsers developer tools, find the element you want to change the CSS for. You can even tweak it via the developer tools and see the influence of your changes live. Hope this helps. Thanks

Arjun G N

Arjun G N   ·   7 years ago

setting isWithDayTime="false" dint work . Is it the right way ?

Ophir Stern

Ophir Stern   ·   7 years ago

Hi Arjun, have you changed it following angular 1's guidelines? thus writing in HTML `is-wth-day-time` (all lower case) ?

Arjun G N

Arjun G N   ·   7 years ago

Yes i tried it with is-with-day-time="false" and is-wth-day-time="false"

Ophir Stern

Ophir Stern   ·   7 years ago

Sorry, daytime is a single word.. Please try with is-with-daytime="false" Thanks

Arjun G N

Arjun G N   ·   7 years ago

Thanks That worked, but it would great if some examples are included in the plugin code or a complete js is provided so that we can least debug the issue.

Ophir Stern

Ophir Stern   ·   7 years ago

Thanks for the input, I plan on adding it when time will enable. Enjoy the plugin

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Cameron Lynch

Cameron Lynch   ·   8 years ago

Hi Ophir, is it possible to call your directive from the controller? It looks like from the docs its called from the view inside an input tag. Example of it happening in a different layout in the ionic timepicker http://market.ionic.io/plugins/ionictimepicker . Thanks , Cameron

Ophir Stern

Ophir Stern   ·   8 years ago

Hi Cameron, sorry for the late reply, has issues with the Ionic market interface yesterday. If you're question is whether or not you can open the drawer from controller then the answer is yes, but you still need and HTML representation for the directive. Is this what you meant?

Cameron Lynch

Cameron Lynch   ·   8 years ago

Yes, that is what I mean. I want to bring it up when ion-toggle opens, and not when you click on the input. So I just have an ng-click if toggle true/false. How do you do it? Thanks

Ophir Stern

Ophir Stern   ·   8 years ago

Ok, so to do this bind the `control` attribute of the directive to an object: javascript: $scope.myPickerControl = {}; html: <input type="text" control="myControl"ng-model="value" ion-time-picker> Now, after the directive is initialized this control object will have a method called openDrawer, call it: $scope.myPickerControl. openDrawer(); Tell me if this solved your issue. P.S for the rest of the `control` object available commands you can read the Github documentation: https://github.com/souly1/ion-time-picker

Cameron Lynch

Cameron Lynch   ·   8 years ago

Thank you. Will take a look at this shortly.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

nick

nick   ·   8 years ago

Hi, I'm having issues trying to bind the plugin with a model. It returns undefined:undefined. Can you please tell me the format of the model? And also, it would be really nice if you can extend the documentation a bit more, for example, adding some code examples. Other than that, really nice plugins, well done.

Ophir Stern

Ophir Stern   ·   8 years ago

Hi Nick, nice to e-meet. Could you perhaps share the code pieces you're using? send it to my email or open an issue on github, it is much more manageable there. Thanks. Also, regarding the documentation, did you check out the github: https://github.com/souly1/ion-time-picker/ ?

nick

nick   ·   8 years ago

Hi, Yes I read the documentation on github, thanks. Where do I find your email address?

Ophir Stern

Ophir Stern   ·   8 years ago

Email: stern.ophir@gmail.com

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

bab

bab   ·   7 years ago

Hi, I already purchased this awesome component, but i need to modify a bit on this component , plan to add date selection into the picker, how can i do that?

Ophir Stern

Ophir Stern   ·   7 years ago

Hi bab, this component does not have a date picking module with it, if I'm not mistaken Ionic comes with a good prebuilt one to complement a time picker, but I'm not familiar with one which gives both, sorry

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Tobias Green

Tobias Green   ·   7 years ago

Hi there - the keyboard popups when I use this directive on an input element. Is there a way to disable this behaviour?

Ophir Stern

Ophir Stern   ·   7 years ago

Hi Tobias, you need to make the input fields readonly (http://www.w3schools.com/tags/att_input_readonly.asp) to avoid the default keyboard opening. Update how it worked out. P.S I'm more responsive on Github, you can reach me there. Thanks

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Arjun G N

Arjun G N   ·   7 years ago

I see this statement on the purchase page which is not true Has complementary number picker (https://gum.co/uEFnY) and text/object picker (https://gum.co/vFEVL)

Ophir Stern

Ophir Stern   ·   7 years ago

Hi Arjun, sorry, I do not understand what you mean statement is not true, could you perhaps elaborate as to the issue? Thanks

Arjun G N

Arjun G N   ·   7 years ago

The purchase page displays that date picker package has number picker and object picker has complementary(extra).

Ophir Stern

Ophir Stern   ·   7 years ago

Hi Arjun, it has link aside each picker and additional line: * NEW: package of number picker, time picker and select picker released with bundle price: https://gum.co/FyMUc but never the less, I'll make sure it's clearer, thanks

Ophir Stern

Ophir Stern   ·   7 years ago

Done

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Joer

Joer   ·   7 years ago

hi,how to license hours of change?

Joer

Joer   ·   7 years ago

Just as I slipped to 4 o'clock, how to change the value of minutes

Ophir Stern

Ophir Stern   ·   7 years ago

Hi Joer, Sorry but I'm not sure I understood the question: * What do you mean in license hours of change? * What do you mean 'slipped to 4...'? If you are using Google translate, it is doing a lousy job. try translating to english and then back to your original language and see if understandable.

Joer

Joer   ·   7 years ago

Language is really a big trouble,do you understand *slipped to 4 o'clock*? *When sliding to 4 o'clock, how to take this value and change the value of minutes* This statement is understandable to me

Joer

Joer   ·   7 years ago

Just like choosing a country after changing the city,what should I do

Ophir Stern

Ophir Stern   ·   7 years ago

Hi Joer, the behavior of minutes is the same as hours, as seen in animated gif video on this page

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Rakesh Gajula

Rakesh Gajula   ·   6 years ago

I purchased the ion-time-picker from gumroad and downloaded the library. I only have the minified version of the library inside the archieve. Can you please let me know how to get to un-minified files ?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Rakesh Gajula

Rakesh Gajula   ·   6 years ago

I purchased the ion-time-picker from gumroad and downloaded the library. I only have the minified version of the library inside the archieve. Can you please let me know how to get to un-minified files ?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Joer

Joer   ·   7 years ago

hi,how to license hours of change?

Joer

Joer   ·   7 years ago

Just as I slipped to 4 o'clock, how to change the value of minutes

Ophir Stern

Ophir Stern   ·   7 years ago

Hi Joer, Sorry but I'm not sure I understood the question: * What do you mean in license hours of change? * What do you mean 'slipped to 4...'? If you are using Google translate, it is doing a lousy job. try translating to english and then back to your original language and see if understandable.

Joer

Joer   ·   7 years ago

Language is really a big trouble,do you understand *slipped to 4 o'clock*? *When sliding to 4 o'clock, how to take this value and change the value of minutes* This statement is understandable to me

Joer

Joer   ·   7 years ago

Just like choosing a country after changing the city,what should I do

Ophir Stern

Ophir Stern   ·   7 years ago

Hi Joer, the behavior of minutes is the same as hours, as seen in animated gif video on this page

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Arjun G N

Arjun G N   ·   7 years ago

I see this statement on the purchase page which is not true Has complementary number picker (https://gum.co/uEFnY) and text/object picker (https://gum.co/vFEVL)

Ophir Stern

Ophir Stern   ·   7 years ago

Hi Arjun, sorry, I do not understand what you mean statement is not true, could you perhaps elaborate as to the issue? Thanks

Arjun G N

Arjun G N   ·   7 years ago

The purchase page displays that date picker package has number picker and object picker has complementary(extra).

Ophir Stern

Ophir Stern   ·   7 years ago

Hi Arjun, it has link aside each picker and additional line: * NEW: package of number picker, time picker and select picker released with bundle price: https://gum.co/FyMUc but never the less, I'll make sure it's clearer, thanks

Ophir Stern

Ophir Stern   ·   7 years ago

Done

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Tobias Green

Tobias Green   ·   7 years ago

Hi there - the keyboard popups when I use this directive on an input element. Is there a way to disable this behaviour?

Ophir Stern

Ophir Stern   ·   7 years ago

Hi Tobias, you need to make the input fields readonly (http://www.w3schools.com/tags/att_input_readonly.asp) to avoid the default keyboard opening. Update how it worked out. P.S I'm more responsive on Github, you can reach me there. Thanks

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

bab

bab   ·   7 years ago

Hi, I already purchased this awesome component, but i need to modify a bit on this component , plan to add date selection into the picker, how can i do that?

Ophir Stern

Ophir Stern   ·   7 years ago

Hi bab, this component does not have a date picking module with it, if I'm not mistaken Ionic comes with a good prebuilt one to complement a time picker, but I'm not familiar with one which gives both, sorry

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

nick

nick   ·   8 years ago

Hi, I'm having issues trying to bind the plugin with a model. It returns undefined:undefined. Can you please tell me the format of the model? And also, it would be really nice if you can extend the documentation a bit more, for example, adding some code examples. Other than that, really nice plugins, well done.

Ophir Stern

Ophir Stern   ·   8 years ago

Hi Nick, nice to e-meet. Could you perhaps share the code pieces you're using? send it to my email or open an issue on github, it is much more manageable there. Thanks. Also, regarding the documentation, did you check out the github: https://github.com/souly1/ion-time-picker/ ?

nick

nick   ·   8 years ago

Hi, Yes I read the documentation on github, thanks. Where do I find your email address?

Ophir Stern

Ophir Stern   ·   8 years ago

Email: stern.ophir@gmail.com

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Cameron Lynch

Cameron Lynch   ·   8 years ago

Hi Ophir, is it possible to call your directive from the controller? It looks like from the docs its called from the view inside an input tag. Example of it happening in a different layout in the ionic timepicker http://market.ionic.io/plugins/ionictimepicker . Thanks , Cameron

Ophir Stern

Ophir Stern   ·   8 years ago

Hi Cameron, sorry for the late reply, has issues with the Ionic market interface yesterday. If you're question is whether or not you can open the drawer from controller then the answer is yes, but you still need and HTML representation for the directive. Is this what you meant?

Cameron Lynch

Cameron Lynch   ·   8 years ago

Yes, that is what I mean. I want to bring it up when ion-toggle opens, and not when you click on the input. So I just have an ng-click if toggle true/false. How do you do it? Thanks

Ophir Stern

Ophir Stern   ·   8 years ago

Ok, so to do this bind the `control` attribute of the directive to an object: javascript: $scope.myPickerControl = {}; html: <input type="text" control="myControl"ng-model="value" ion-time-picker> Now, after the directive is initialized this control object will have a method called openDrawer, call it: $scope.myPickerControl. openDrawer(); Tell me if this solved your issue. P.S for the rest of the `control` object available commands you can read the Github documentation: https://github.com/souly1/ion-time-picker

Cameron Lynch

Cameron Lynch   ·   8 years ago

Thank you. Will take a look at this shortly.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Stewart Hering

Stewart Hering   ·   8 years ago

I have a few questions about usage... One. How do I setup the time picker to be a 24 hour picker? Two. What are the css classes to edit the elements of the time picker to design a custom look? Please do answer quickly. This would be an amazing plugin if it were better documented and I did nit need to ask these questions.

Ophir Stern

Ophir Stern   ·   8 years ago

Hi Stawart, thanks for the post. If you look at (https://github.com/souly1/ion-time-picker) you're can see the documentation for using the component. Specifically, what you are asking for (24h) is set by setting attribute isWithDaytime to false. Regarding the css classes it really depends which part you require to give a custom look as there are several component, what was used thus far by other customers is with a web browsers developer tools, find the element you want to change the CSS for. You can even tweak it via the developer tools and see the influence of your changes live. Hope this helps. Thanks

Arjun G N

Arjun G N   ·   7 years ago

setting isWithDayTime="false" dint work . Is it the right way ?

Ophir Stern

Ophir Stern   ·   7 years ago

Hi Arjun, have you changed it following angular 1's guidelines? thus writing in HTML `is-wth-day-time` (all lower case) ?

Arjun G N

Arjun G N   ·   7 years ago

Yes i tried it with is-with-day-time="false" and is-wth-day-time="false"

Ophir Stern

Ophir Stern   ·   7 years ago

Sorry, daytime is a single word.. Please try with is-with-daytime="false" Thanks

Arjun G N

Arjun G N   ·   7 years ago

Thanks That worked, but it would great if some examples are included in the plugin code or a complete js is provided so that we can least debug the issue.

Ophir Stern

Ophir Stern   ·   7 years ago

Thanks for the input, I plan on adding it when time will enable. Enjoy the plugin

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.