A time picker for Ionic framework applications

Hmm… Maybe… ok i will show my code…

This is my code that i’m used in my controller

var storedDate = $scope.info[0].time;
    var x = storedDate.substr(0,2); // x will have hours
    var y = storedDate.substr(3,2); // y will have minutes
    var z = storedDate.substr(5,2); // z will have meridian
    if(z === 'PM'){
      x += 12; 
    }
    //Convert the hours and minutes to number
    var inputDate = new Date();
    inputDate.getHours(x);
    inputDate.getMinutes(y);

    $scope.timePickerObject = {
      inputEpochTime:inputDate,  //Optional
      step: 1,  //Optional
      format: 12,  //Optional
      titleLabel: 'Select Time',  //Optional
      closeLabel: 'Close',  //Optional
      setLabel: 'Set',  //Optional
      setButtonType: 'button-positive',  //Optional
      closeButtonType: 'button-stable',  //Optional
      callback: function (val) {    //Mandatory
        timePicker12Callback(val);
      }
    };

Output:

image

that above code is correct?

Hi @rajeshwarpatlolla , Please try to find out the good solution for me! :unamused:

Create a codepen or plunker and give me the link. I will try to help you. By the way this forum thread is for ionic-timepicker component, not for the ionic-datepicker. Please post anything related to ionic-datepicker here

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

i need help to customize the datepicker from seleted day i want to disabled the dates before seleted day

Please continue this thread at this link, as this is related to the ionic-datepicker.

If you want to disable the dates past to the selected dates you can pass the from : selectedDate, then it will disable the dates past to the given date(In our case past past to the selectedDate).

After some bit of research on what date & time picker to use for my app. I decided to go with HTML5 date & datetime-local, they have great UI in android & iOS. For testing, use chrome browser for testing. This is perfect as no plugin needs to be installed.

example at http://ionicframework.com/html5-input-types/#date
http://www.w3schools.com/html/html_form_input_types.asp ( see datetime-local)

I got this error when using the Timepicker… how do I solve this ?
I follow the example code

{"inputEpochTime":39600,"step":15,"format":12,"titleLabel":"12-hour Format","setLabel":"Set","closeLabel":"Close","setButtonType":"button-positive","closeButtonType":"button-stable"} to be a date

What is the error here?

I followed this sample code

$scope.temp.newSchedule = { local: true, status: 'add', start_at: { inputEpochTime: ((new Date()).getHours() * 60 * 60), //Optional step: 15, //Optional format: 12, //Optional titleLabel: '12-hour Format', //Optional setLabel: 'Set', //Optional closeLabel: 'Close', //Optional setButtonType: 'button-positive', //Optional closeButtonType: 'button-stable', //Optional callback: function (val) { //Mandatory // timePickerCallback(val); } } };

Also the 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>

when I run my code that console came out… I dont know why… I used the latest version :smile:

This is the object and the template that you are using. This is not the error. Could you please cross check the instructions i mentioned at the repo. Also if you find any other error on the console, you can paste it here.

1 Like

I still do have the same error…

<ionic-timepicker input-obj="temp.newSchedule"> <button class="button button-block button-positive overflowShow"> <standard-time-meridian etime='temp.newSchedule.start_at.inputEpochTime'></standard-time-meridian> </button> </ionic-timepicker>

Hi,
I follow the instructions are given in ripe (https://github.com/rajeshwarpatlolla/ionic-timepicker). The issue I’m getting is Current Time is not visible above BUTTON. But, on click on button Timepicker is coming.

Don’t know what’s the issue. I’m also not getting any error inside my browser’s console.

You should have the variable in your controller to which you are assigning the time. Please check the demo.

Thanks for the quick reply. Here is the piece of code from my Controller file & View files.

CONTROLLER file Code

// Code for Timepicker
function timePickerCallback(val) {
    if (typeof (val) === 'undefined') {
        console.log('Time not selected');
    } else {
        $scope.timePickerObject.inputEpochTime = val;
        var selectedTime = new Date(val * 1000);
        console.log('Selected epoch is : ', val, 'and the time is ', selectedTime.getUTCHours(), ':', selectedTime.getUTCMinutes(), 'in UTC');
    }
}


$scope.timePickerObject = {
    inputEpochTime: ((new Date()).getHours() * 60 * 60),  //Optional
    step: 15,  //Optional
    format: 12,  //Optional
    titleLabel: '12-hour Format',  //Optional
    setLabel: 'Set',  //Optional
    closeLabel: 'Close',  //Optional
    setButtonType: 'button-positive',  //Optional
    closeButtonType: 'button-stable',  //Optional
    callback: function (val) {    //Mandatory
        timePickerCallback(val);
    }
};

VIEW file code

<ionic-timepicker input-obj="timePickerObject">
    <button class="button icon-left ion-clock overflowShow">
        <standard-time-meridian etime='timePickerObject.inputEpochTime'></standard-time-meridian>
    </button>
</ionic-timepicker>

Is there anything I’m missing from this code ?

Thank you… its on my mistake… ((new Date()).getHours() * 60 * 60) i change it to 12600 in order to be a valid date… :smile:

@rajeshwarpatlolla Hey, finally I shorted out the thing. I didn’t add those directive (standardTimeMeridian) in my app.js file. After adding that one, now Date is showing on the button.

By the way, it’s also nowhere mentioned in your ‘How to use’ section of GitHub repo. It’ll be a really great help if you add this piece of information also at there.

Anyway, thanks for this great work.

Thanks for your suggestion. :grinning:

Hi,
I am pretty new to ionic and I am trying to implement your time picker. However, I realise that the displayed time picker doesn’t correspond to my local timing when I perform a filter.

For example, on your time picker I selected 3:00PM.

In my code, I performed console.log($filter(‘date’)(selectedTime, ‘HH:mm a’));
and it seems to print out 23:00 instead. My timezone is GMT +8.

Is there any way such that the time picker would display my actual time zone timing?

Thank you for your help and I really hope to hear from you soon.

This time picker doesn’t deal with the local time zone. Whenever you select some time all it will perform is giving the time in epoch to the user, so that you can do any custom manipulations.