A time picker for Ionic framework applications

Thank you so much @PedroGusmans.


and a new suggestion -> possibility to enable the input fields. Set type to number with validation like (max and min value - to only accept valid values for the chosen format).
It is sometimes easier to fill it in via keyboard.

I will add a ‘ionic-timepicker’ bower component shortly. So that any one can use my time picker using bower.

Please check out the ‘ionic-timepicker’ Bower component here

1 Like

Man, plz ! Can you explain to me how work with a epoch time ???

I tried that but didn’t work !

{{slots[0].epochTime | date:‘H:mm’ }}

Thanks !

The reason is because ionic-timepicker uses seconds and the date filter uses milliseconds. Change that to {{ slots[0].epochTime * 1000 | date:‘H:mm’ }} and it will show the correct time (in your time zone).

I forked it and fixed the issue. Your original code will show correctly now

Overall great work and thanks for sharing. However, since you published a bowen package I assumed it would be a little more polished. A few things that threw me off:

  1. You’re not using real epochs. In fact, you’ll accept a real epoch but
    then you cut out the date portion on ‘Set’ (saving). My solution
    here was to extract the days from the input epoch then add them back
    in when adding totalSec to scope.etime

  2. I don’t think it’s useful for many people to use UTC. Most user’s
    want times in their local timezone. Maybe this is something you
    didn’t notice since you weren’t working with real epochs. My
    solution was to convert all your UTC Date calls to regular calls.

Thanks again.

Just tested on Android 4.1.1 Chrome and your views don’t render properly. Can’t blame ya there as I know how hard it is to test cross-platform! :wink:

Before using this time picker you can convert the time(in milli seconds) to the required time zone’s epoch and you can pass the value.

Awesome!! This is a very nice solution! Thanks

Hi @bengtler, i have created date picker also. Have a look at the below links.

Date picker Demo

ionic-datepicker Bower component

1 Like

Thanks @rajeshwarpatlolla for your great work!

YOU ROCK @rajeshwarpatlolla. Your date picker and time picker are awesome! Many thanks…

However, I found an issue: in my app the date field will always be empty, so I get the following error: “Uncaught TypeError: e.getFullYear is not a function”

If current_date is null or nothing, then set to new Date() (ionic-datepicker.js)

Also 2 suggestions:

  1. Possibility to add “Today” button to bring me back to the current month
  2. Possibility to highlight today’s date (maybe in yellow) in addition to the selected date

Thanks for your suggestion @gigocabrera, will try to implement these features in the next release and will let you know.

Hi @gigocabrera, i have implemented the features you have suggested for ionic-datepicker. I have release v0.1.2 with updated code. If you have any suggestions or comments regarding ionic-datepicker please post in the ionic-datepicker post instead of posting at ionic-timepicker post, so that others will also get to know about the new changes in ionic-datepicker.
You can check the demo link.

@rajeshwarpatlolla thank you very much for such cool date picker! And time picker too :wink:


It’s perfect for a lot of situation. I’m facing though some problems when trying to use it as a birth date selector.
As the year is not easy to change in a large range.

For example , i think it would be pretty nice to add an option in which you could jump from year 2015 to 1980 for example, i can’t imagine how to do it at UI level.

What do you think?

Really great job!

Hi @Javi, that a doable thing. Will try to implement in the upcoming releases.
Any how i release a new version of ionic-datepicker#v0.2.0 with a small bug fix. Better use this new version.

ionic-timepicker new version v0.2.0 has been released.
Callback function has been added to get the selected time(in epoch) into the controller.
Please have a look at github repository @ https://github.com/rajeshwarpatlolla/ionic-timepicker for more details.