A time picker for Ionic framework applications


#1

I have built a ionic-timepicker bower component for Ionic frame work, which supports both 12-hour and 24-hour format, with 15 and one minute increment / decrement. No additional plugins required.

Check out the below links

View project @ Github

View Demo

You can have a look at the ionic-datepicker bower component which i have created.


Looking for a date-picker for ionic / mobile performance focused
Open a the date picker by clicking a button?
Datepicker for Android <4.4 NEW
Need Help Getting a DatePicker working, Please and thanks!
Problem with date picker when viewing in a desktop browser
Date picker not working with ionic.bundle.js
Native date picker in ionic
Angular-DatePicker - pickadate.js port to Angular, no jQuery dependency!
Looking for a responsive date-picker with multi date selection
Date Picker for Ionic
Form Date Picker
Date Picker is not working
Date time picker for ionic
Difference in no.of likes. And `Nice Post` badge not received
Date Time View using Ionic frame work
HTML5 input types - Time?
Cannot set input="time" anymore on android
Is there a time picker in Ionic?
How to create a time picker using ionic?
Date and time input type
Is there any datetime picker in ionic framework
Hour/Minute picker
Looking for a date-picker for ionic / mobile performance focused
DatePicker in ionic framework
#2

Would be nice to get only necessary sources instead of a demo project.

like calling bower install ioniciTimePicker and get the timepicker with dependencies.
And please remove your webstorm project folder from the repo. it is the “.idea” folder.
Set it on your .gitignore file

Thanks


#3

Hey bengtler,
Thanks for the suggestion.


#4

would be awesome with a screenshot. Does it support intervals?


#5

Hey crissi,

Yes, it supports intervals. All you need to do is, in side the object you need to specify the time interval.


#6

Annnnd does it have 24h support :wink:


#7

@bengtler, as of now it doesn’t have 24 hour support. I can modify it, so that it will also support 24 hour format.


#8

Do it do it do it :wink: please.
Maybe you can provide also a date picker functionality?

So you make a IonicDateTimePicker.
1 module with 2 directives:

  • timepicker
  • datepicker
    and translations support!
    like passing translations to the directive for Months, Days, Cancel and Set button labels

same layout same repo

I think many buddies will kiss your feet ;).


#9

Love the looks of this, thank you!

I’ve been struggling with time pickers recently.

Cheers
-Chris


#10

@bengtler, i am trying to make the time picker for 24 hour format too. Once i am done with it, let me think about the date picker. Your idea is really cool.


#11

it is looking good :slight_smile:
Date Picker also would be very interesting !

Cheers!


#12

@pjusto, I am planning for that.


#13

24 hour support has been added.


#14

it can return the time as string? Example just ‘13:30’ ?

thank you for your great work!


#15

No, it only returns the epoch time, you can easily convert epoch time in to any date format in angular/ionic.
Hope the following link will be useful.
https://docs.angularjs.org/api/ng/filter/date


#16

Hi @bengtler,
I have converted the whole functionality into one directive, which supports both 12-hour and 24-hour formats.


#17

@rajeshwarpatlolla, nice work! Are you going to register your time picker for public avaliability to use it as a dependency in bower? (As described in http://bower.io/docs/creating-packages/)


#18

@leoliteck, i am planning to register this time picker as a bower component, so that any one can use it.


#19

Amazing! Thanks, will be great even as datapicker, not just for time :smile:


#20

Good work, nicely done