This is a fork from the original https://github.com/rajeshwarpatlolla/ionic-timepicker

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

View Demo

##Prerequisites.

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

Major modifications brought for Nirby needs

1. Adding the closeTimePicker service

2. Adding closeCallback attribute : this callback is called when the user clicks the "cancel" button

3. Correcting a CSS bug with buttons display

4. Correcting a functional bug related to the time calculation

For bundle generation

1. import the node dependencies by running : npm install
2. create the min bundle file by running : gulp make-bundle

##How to use:

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

bower install nirby-ionic-timepicker --save

This will install the latest version of nirby-ionic-timepicker. If you wish to install any specific version(eg : v0.0.1) then

bower install ionic-timepicker#v0.0.1 --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

f) closeCallback(Optional) : this callback is called when the user clicks the "cancel" button

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');
      }
    },
    closeCallback: function(){ //Mandatory
      // do something when the user clicks the modal/popup's close/cancel button
    },
    inputTime: 50400,   //Optional
    format: 12,         //Optional
    step: 15,           //Optional
    setLabel: 'Set2'    //Optional
  };
  
  ionicTimePicker.openTimePicker(ipObj1);
  
  $scope.closeTimePicker = function(){
      ionicTimePicker.closeTimePicker();
  };
};

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