Hi Rajesh,
great work here! I tried the time picker and it displays, but the callback function is not happening for me, really similar code to the example:
<ionic-timepicker etime="slots.currentTimeInSeconds" format="slots.format" step="slots.step" callback="timePickerCallback">
<button class="button button-block button-positive">Session time</button>
</ionic-timepicker>
$scope.timePickerCallback = function(val) {
if (typeof (val) === 'undefined') {
console.log('Time not selected');
} else {
console.log('Selected time is : ', val); // `val` will contain the selected time in epoch
}
};
Hi @elduderino15, Are you using both the html and the callback function in the same controller?
And also could you please check the bower.json in the ionic-timepicker folder inside lib directory. It should be 0.2.0
{
"name": "ionic-timepicker",
"version": "0.1.1",
"authors": [
"rajeshwarpatlolla <rajeshwar.patlolla@gmail.com>"
],
I could go and update it manually, but why does bower pull that old version?
Bower uses cache to get the data.
So please run bower uninstall ionic-timepicker --save and then clear the cache using bower cache clean command. And now install it again using bower install ionic-timepicker --save
1 Like
Thanks! It works now. Great!!
Bower updated to 0.2.0
I skimmed through the last posts but I didn’t see if it was planned:
Is there a way to have an option to use either actual time vs like a time length? My app requires users to enter how long they want to do something so for them to be able to choose 0 hours and 15 minutes would be helpful. I know I could probably hack it in and just figure out the date time differences, but it would be a neat added feature.
Let me know what you think!
This component is purely a time picker not the range picker. So it does not have such feature to select the range.
I understand, I am requesting it as a feature. Is that in the road map at all?
Hi @NorthMcCormick, that won’t be part of the time picker functionality. It would be another component which supports selecting no of hours. So i am not planning to implement this feature in this component.
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 repository here
Hi @rajeshwarpatlolla,
Could u tell me how to view the localstorage time in time picker ?
So i think this is the code i want to change,
inputEpochTime: ((new Date()).getHours() * 60 * 60)
I want to show the exact time that i saved in localstorage.
The input date should be a Date object. In your case you are giving it an input inputEpochTime: ((new Date()).getHours() * 60 * 60). If the current time is 1:10PM, then your code will return 46800, which is not the right way of passing the date object. You need to construct a date object with the time you have stored there.
Could you please let me know how you are storing the date in your local storage?
@rajeshwarpatlolla stored date format is 12.04PM
Then you need to do something like this
var storedDate = '12.04PM';
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.setHours(x);
inputDate.setMinutes(y);
Then you can use inputDate as the input date to the icomponent.
By the way this is not an issue with the component. It’s the manipulation you need to do in your controller.
Hi @rajeshwarpatlolla thanks for your quick response,
It’s show the EpochTime please refer the image. i think i used inputDate in wrong place.
please mention where i can use the inputDate in the timepicker component.
$scope.timePickerObject = {
inputEpochTime: ((new Date()).getHours() * 60 * 60), //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);
}
};
In the first line inputEpochTime: ((new Date()).getHours() * 60 * 60), instead of passing ((new Date()).getHours() * 60 * 60) pass inputDate.
@rajeshwarpatlolla Same issue. that above image shows. 
May be you are doing something wrong. It’s purely something which you need to handle at your end. Once you pass date object to the component, it will work fine for sure. Please check the instructions in the repo
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:
that above code is correct?
Hi @rajeshwarpatlolla , Please try to find out the good solution for me! 