Ionic-timepicker Bower component for Ionic framework applications

ionic-v1
1

I have designed a bower component ionic-timepicker, which can be used in any ionic frameworks application. No additional plugins required.

Please checkout the github repository at the below mentioned link.

ionic-timepicker project @ Github

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

##Introduction:

This is a ionic-timepicker bower component which can be used with any Ionic framework’s application.

View Demo

##Prerequisites.

  1. node.js, bower and gulp.

##How to use:

  1. In your project repository install the ionic time picker using bower

    bower install ionic-timepicker --save-dev

  2. Then you can see the following directory structure see in your project folder

Directory Structure

Give the path of style.css, templates.js and ionic-timepicker.js in your index.html file.

<link href="lib/ionic-timepicker/dist/style.css" rel="stylesheet">

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

  1. In your application module inject the dependency ionic-timepicker, in order to work with the ionic time picker

    angular.module(‘modulename’, [‘ionic’, ‘ionic-timepicker’]){

    }

  2. Use the below format in your template’s corresponding controller

    $scope.slots = [
    {epochTime: 12600, step: 15, format: 12},
    {epochTime: 54900, step: 1, format: 24}
    ];

  3. Then use the below format in your template / html file

    {{slots[0].epochTime}}

a) ionic-timepicker is the directive, to which we can pass required vales.

b) etime takes epoch time.

c) format indicates 12 hour or 24 hour format. It can take two values, 12 or 24.

d) step indicates minute increment. It can take two values, 1 or 15.

Tested with angular#1.3.6 and ionic#1.0.0-beta.14.

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

##License:
MIT

##Contact:
gmail : rajeshwar.patlolla@gmail.com

github : https://github.com/rajeshwarpatlolla

twitter : https://twitter.com/rajeshwar_9032

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

3 Likes
2

It looks good. I have added your component in my GitHub list.

It would be good if your component allows to enter values too.

3

@Purusothaman, thanks for adding my repo to your github and thanks for the suggestion.

4

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 https://github.com/rajeshwarpatlolla/ionic-timepicker for more details.

5

Hi guys, i have released a new version (v0.3.0) with some customization features. Please use this new version from now on if you wish to use it. Please have a look at the github repository

6

Hi Guys, Thanks for all of you, for helping me to fix bugs. I have released a new version of ionic-timepicker v0.4.0. Please use this new version from now onwards.

7

hi, how to get year, month , day by the ionic-timepicker?

8

It does not give you all those details. It gives you epoch only. From epoch you can get the hours, minutes and seconds.

9

thanks for the module i would like to know two things if you have time :

How to load the time picker in a function ?

like :

$scope.openModal = function (index) {
$scope.test = $base64.encode("bonjour");
if (index == 1)
{
  $scope.modal.show();
  }
  else {
      $scope.modalCalendar.show();
      // i want to lod the window just after loadindg the modal
      $scope.timePickerObject;
  };

};

and how to load the windows in a popup :

  $scope.showPopup = function() {
     $scope.data = {}

     // Custom popup
     var myPopup = $ionicPopup.show({
        template: '<ionic-timepicker input-obj="timePickerObject"><button class="button button-block button-positive overflowShow"><standard-time-meridian etime="timePickerObject.inputEpochTime"></standard-time-meridian></button></ionic-timepicker>',
        title: 'Title',
        subTitle: 'Subtitle',
        scope: $scope,

        buttons: [
           { text: 'Cancel' }, {
              text: '<b>Save</b>',
              type: 'button-positive',
                 onTap: function(e) {

                    if (!$scope.data.model) {
                       //don't allow the user to close unless he enters model...
                          e.preventDefault();
                    } else {
                       return $scope.data.model;
                    }
                 }
           }
        ]
     });

     myPopup.then(function(res) {
        console.log('Tapped!', res);
     });
  };

thanks and regards

10

I am planning for a new release with which you can call the time picker from a controller. But for now, you have to use the directive only.

11

Hi All, a new version(v0.5.0) of ionic-timepicker v0.5.0 has ben releases with new features. If anyone want to use ionic-timepicker please use this new version.

12

Hi,
I’m using the ionic data picker (which looks great), but when I parse epoch to new Date(val), it returns date in 1969. Is there any reason why it’s not returning today’s date with the epoch value parsed to the time of today?

Thanks,

B

13

Could you please share the epoch you are passing to the Date object?

14

Thank you for the quick reply.

Time selected using IonicDatePicker = 5:00PM

epoch = 61200

var val = 61200

var selectedTime = newDate(val * 1000);
This logs out to Thu Jan 01 1970 11:00:00 GMT-0600 (CST)

var selectedTimeTest = newDate(val);
This logs out to Wed Dec 31 1969 18:01:01 GMT-0600 (CST)

Using the plugin, how can I parse this to Today’s date at the time selected using the TimePicker

ex Thu April 28 2016 17:01 (CST)

15

When you pass 61200000 as the input to the time picker it will show 22:30 as the time.

new Date(61200000)
Thu Jan 01 1970 22:30:00 GMT+0530 (IST)
```
16

So, how can I create a date of Today and then the time that is selected using the TimePicker. Guess I’m confused on how the timepicker outputs a time for the current date.

17

Time picker does not depend on the date picker and date. It all depends on the input you pass to it. If you refer to the docs at the github, they should give you some more idea on these two plugins and how they work.

18

I discovered that I just have to set my Date(), then pass the getUTCHours() into the setHours() and getUTCMinutes() into the setMinutes() methods. Viola. Thanks for your replies.

19

Hi Everyone, i am trying to list all the ionic framework plugins in a single repository. I had spent lot of time in getting all these plugins into one location, which hopefully should save so much of time of people who like to find one. I have added as many as i can. If you feel that i missed any plugin, please feel free to make a PR or raise an issue with the details of the plugin.

Here you can find the list of all ionic plugins : https://github.com/rajeshwarpatlolla/ionic-plugins