Ionic Timepicker

Ionic Timepicker

'ionictimepicker' bower component for ionic framework applications

Free!

(9)
Rajeshwar

Rajeshwar

Member since 2014

Details

Version:
0.5.0
Size:
0mb
Ionic:
1.0 beta 14,1.0.0,1.0.1
Platforms:
iOS, Android
View ID:
73EB74F8
Released:
3 years ago
Updated:
3 years ago
Category:
Plugins
Tags:
ionic, time-picker

bitHound Score

##Introduction:

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

[View Demo](http: ajeshwarpatlolla.github.io/TimePickerForIonicFramework/demo/ "Demo")

##Prerequisites.

  • node.js, npm
  • ionic
  • bower
  • gulp

##How to use:

1) In your project folder, please install this plugin using bower

bower install ionic-timepicker --save

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.

<!-- path to ionic -->
<script src="lib/ionic-timepicker/dist/ionic-timepicker.bundle.min.js"></script>

3) In your application's main module, inject the dependency ionic-timepicker, in order to work with this plugin

angular.module('mainModuleName', ['ionic', 'ionic-timepicker']){
//
}

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.

.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.

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)).

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.

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.

d) setLabel(Optional) : The label for Set button. Default value is Set

e) closeLabel(Optional) : The label for Close button. Default value is Close

5) Inject ionicTimePicker in the controller, where you wish to use this component. Then using the below method you can call the timepicker.

.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);
};

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.

In all the above steps, only mandatory property is the callback where you will get the selected time value.

##Screen Shots:

Once you are successfully done with the above steps, you should be able to use this plugin.

The first screen shot shows the popup and the second shows the modal of this plugin.

iOS :

Android :

##CSS Classes:

###popup

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:

1) v0.1.0

The whole time picker functionality has been implemented, and can be installed with

bower install ionic-timepicker --save

2) v0.1.1

Directive name has been modified.

3) v0.1.2

If the minutes and hours are less than 10, then 0 will be prepended to the value of minutes/hours.

4) v0.2.0

Callback function added to get the selected time in to the controller.

5) v0.2.1

Class names modified as per this bug.

6) v0.3.0

Features added to customize this component.

7) v0.4.0

Bug fixes : #48, #53, #51

PR : #54,

Few additional enhancements added.

8) v0.5.0

Features

a) You can configure the ionic-timepicker from the config method.

##License: MIT

##Contact: Gmail : [email protected]

Github : https://github.com/rajeshwarpatlolla

Twitter : https://twitter.com/rajeshwar_9032

Facebook : https://www.facebook.com/rajeshwarpatlolla

Paypal : [email protected]

Comment or Rate it : http://market.ionic.io/plugins/ionictimepicker

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

Edwin Palacios

Edwin Palacios   ·   3 years ago

It is very good idea. but you could put dates momentjs?

Khaled_

Khaled_   ·   3 years ago

Well done

Justin Noel

Justin Noel   ·   3 years ago

Excellent plugin! Thanks so much. FYI to anyone using this : Do not use the instructions here as they are out of date. Instead use the docs from Github.

Rajeshwar

Rajeshwar   ·   3 years ago

Thanks @Justin, I have updated the description here also. You can use the instructions mentioned here.

Rui Alves

Rui Alves   ·   3 years ago

Really good!!!

Matthew Hunt

Matthew Hunt   ·   3 years ago

Is there a way to change the color of the time picker?

  ·   just now

{{ reply.comment }}



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

Kien Gian

Kien Gian   ·   2 years ago

@Rajeshwar Hi, Can you point me how to set the Time popup is 00 : 00 : AM and the minutes displayed from 0 to 59 mins.

Rajeshwar

Rajeshwar   ·   2 years ago

Hi @KienGian, you can't set 00:00 AM. It will be 12:00AM. Because there will not be 00:00AM. And if you want to increase the time by a minute you can configure it using `step` property.

  ·   just now

{{ reply.comment }}



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

Vinod Hum

Vinod Hum   ·   2 years ago

can this be used with ionic 2 ?

Rajeshwar

Rajeshwar   ·   2 years ago

This is only for ionic v1.x. But the plan is also to support ionic v2.x, which will be release soon.

  ·   just now

{{ reply.comment }}



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

Abhishek Bhimsaria

Abhishek Bhimsaria   ·   2 years ago

@Rajeshwar Great Plugin, both for date and time picker. But I have a question,might be silly one, When I am setting the time i am getting +5:30 means how i would be able to display in IST

  ·   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.

Abhishek Bhimsaria

Abhishek Bhimsaria   ·   2 years ago

@Rajeshwar Great Plugin, both for date and time picker. But I have a question,might be silly one, When I am setting the time i am getting +5:30 means how i would be able to display in IST

  ·   just now

{{ reply.comment }}



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

Vinod Hum

Vinod Hum   ·   2 years ago

can this be used with ionic 2 ?

Rajeshwar

Rajeshwar   ·   2 years ago

This is only for ionic v1.x. But the plan is also to support ionic v2.x, which will be release soon.

  ·   just now

{{ reply.comment }}



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

Kien Gian

Kien Gian   ·   2 years ago

@Rajeshwar Hi, Can you point me how to set the Time popup is 00 : 00 : AM and the minutes displayed from 0 to 59 mins.

Rajeshwar

Rajeshwar   ·   2 years ago

Hi @KienGian, you can't set 00:00 AM. It will be 12:00AM. Because there will not be 00:00AM. And if you want to increase the time by a minute you can configure it using `step` property.

  ·   just now

{{ reply.comment }}



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

Matthew Hunt

Matthew Hunt   ·   3 years ago

Is there a way to change the color of the time picker?

  ·   just now

{{ reply.comment }}



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

Rui Alves

Rui Alves   ·   3 years ago

Really good!!!

Rajeshwar

Rajeshwar   ·   3 years ago

Thanks @Justin, I have updated the description here also. You can use the instructions mentioned here.

Justin Noel

Justin Noel   ·   3 years ago

Excellent plugin! Thanks so much. FYI to anyone using this : Do not use the instructions here as they are out of date. Instead use the docs from Github.

Khaled_

Khaled_   ·   3 years ago

Well done

Edwin Palacios

Edwin Palacios   ·   3 years ago

It is very good idea. but you could put dates momentjs?

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

Tedy Kanjirathinkal   ·     ·   3 years ago

Awesome! Great job, Rajeshwar!

Justin Noel   ·     ·   3 years ago

Great plugin. Works very well across desktop/android/ios.

Alain ANDRÉ   ·     ·   3 years ago

Really nice one. I love the way it is an object you use and the callback to manage the value !!

Lev Izraelit   ·     ·   3 years ago

Great job!

Edwin Lijnzaad   ·     ·   3 years ago

Thanks!

BrunoD   ·     ·   3 years ago

Great plugin! Thanks!

SBsistemas   ·     ·   2 years ago

Great job!

SBsistemas   ·     ·   2 years ago

Great job!

Julian Porras Polo   ·     ·   2 years ago

Thank you

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}

Julian Porras Polo    ·     ·   2 years ago

Thank you

SBsistemas    ·     ·   2 years ago

Great job!

SBsistemas    ·     ·   2 years ago

Great job!

BrunoD    ·     ·   3 years ago

Great plugin! Thanks!

Edwin Lijnzaad    ·     ·   3 years ago

Thanks!

Lev Izraelit    ·     ·   3 years ago

Great job!

Alain ANDRÉ    ·     ·   3 years ago

Really nice one. I love the way it is an object you use and the callback to manage the value !!

Justin Noel    ·     ·   3 years ago

Great plugin. Works very well across desktop/android/ios.

Tedy Kanjirathinkal    ·     ·   3 years ago

Awesome! Great job, Rajeshwar!