rajeshwarpatlolla / ionic-timepicker Goto Github PK

Please add support of installing through npm

Your example is fine, you are using timepicker in page. I am having issue when i use time-picker in ionic popover page. See below image.

If user clicks time multiple times then multiple timepicker is displayed and application crashes. Is it possible to close timepicker when user click outside?

Hi

I'm unable to set the initial time inputEpochTime. Even the example does not work.

I read the value set from localstorage and set inputEpochTime with that value i.e. 24420

Hello,
Thanks for this timepicker, it works great.
Can you tell me how to set the title of the timepicker, I tried:
<ionic-timepicker etime="slotsStart.epochTime" format="slotsStart.format" step="slotsStart.step" callback="setStartTime" title="test">
but this isn't working.

This is because you use toFixed(0) to round the value for the hours.
You need to use Math.floor..

Hello, I'm rendering a time picker when an ion-toogle makes true a variable. I have a case when the variable is true since the beginning and the object is declared with the default step (15) and I need to set it in 5.

Any solution?

I'm having the same issue with ionic-datepicker too.
Everything works, the callback is triggering and logging the right information. The buttons start with the default text, but it doesn't update after the selection.

Template:





Controller:

$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);
}
};
function timePickerCallback(val) {
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(), ':', selectedTime.getUTCMinutes(), 'in UTC');
    }
  }

Hello, in some cases datepicker and timepicker are used together, is there a method to connect these two directives? Or call timepicker programmatically inside a datepicker callback?

Can't change the values manually.
e.g.: i'm in 0 and need to put value 30, so i need to click up for 30 times, and so on.

Context
In ionic-timepicker.provider.js, Line 99, Number.prototype.toFixed() is used to transform $scope.time.hours into a string.

Problem
As "The number is rounded if necessary (...)", this results in the subsequent hour to be displayed in the picker as soon as the specified ipTime has a minute component of >= 30.

Possible solution
Use Math.floor() instead.

Workaround

This can be seen on the demo page too: http://rajeshwarpatlolla.github.io/TimePickerForIonicFramework/demo/#/tab/timepicker
On decrementing the minutes using the arrow button, the value goes straight from, say 10 to 50 instead of 10 -> 00 -> 50.
The increment functionality works as expected: 50 -> 00 -> 10

If I use the current time as the starting time and that time is not a factor of the defined step parameter, the time selector display gets corrupted, meaning you can get negative numbers and numbers that are not valid minutes

I believe there is a bug with the 12-hour display when 12:00 AM is selected. Steps to reproduce:

• Open a time picker and configure it to 12:00 AM
• Select time
• Re-open the time picker

The time picker will re-appear as 00:00 AM. Note it is displaying "00" instead of "12".

Hello,
I tried ionic timepicker on iPhone, and there is problem with opening keyboard. It could be nice if keyboard doesn't show in that case.

See the problem here:
https://www.dropbox.com/s/lpzw3c7cjqdsp78/timepicker.mov?dl=0

Best regards,

Jan

This is what I get back from the database:
1) 02:30 PM
2) 12:00 AM
3) 08:50 PM

How can I convert string time to epoch time in order to use your ionic-timepicker control?

Hello.
Devices with android 4.2.2 and low resolution may display incorrect with included template.
To prevent popup display incorrect add .col to span class:

Thx! Great job anyway!!

Sorry my english :)

I have set button_set class

.button_set{
background-color: #0a9dc7;
}

but it doesn't work

I even change ionic-timepicker.style.css, then got the same result

I want add 1 hour to current time for showing inputEpochTime as this time.How to do that?

Whenever I open the picker, the time it displays seems to be randomly chosen. Is there a way to make sure it always opens to the current time?

Can I display the ionic-timepicker as an inline control on my form so it is always visible when the user navigates to that view? If so, how?

how can i set the timepicker to show the current time?

I'm using ionic-timepicker and it's working very well, but in an specific project I want to customize the library in something, for example:

1. Change the order of button "Set" and "Cancel", putting the "Set" in right position and "Cancel" in left position.

2. Do not reset hour number when it reaches 24.

3. Change label in Popup Header to show, for example:
   If time is 15:30 -> Label: 15:30 minutes
   If time is 15:00 -> Label: 15 minutes
   If time is 01:00 -> Label: 1 minute
   If time is 00:30 -> Label: 30 seconds
   If time is 00:01 -> Label: 1 second

The purpose of this project is to select how many minutes and seconds to retrieve this value to me, then I'm using hour area to select minutes and minute area to select seconds, because this I would like to change somethings in the library. Is it possible to provide not minified version to compile?

Thanks in advance

Hi man,

See an error using inputTime: http://screencast.com/t/kkB7tdkO0

I'm getting the inputTime with the code of the example:

inputTime : (($scope.myDate.getHours() * 60 * 60) + ($scope.myDate.getMinutes() * 60))

Regards, Nicholls

Hello,

Component creates css style in index.html just below the included js file. Problem is with using classname same as core ionic css classes. It is creating unnecessary css issues for our app. Can we use more specific class names to prevent style conflicts

.bar.bar-stable, .tabs {
    box-shadow: 0 0 5px #555;
}

Not sure if this problem only happens on me or not. I noticed that when I was clicking the time arrow up or down, everything is shaking a little bit. (Either in my program or in the demo) Is there a way to do a quick fix on this issue? I would appreciate for any reply.

I need user to enter specific time as 3:35, but they have press down 35 times to show up exact minute. What do you suggest?

ionic-timepicker module depends on ionic-timepicker.templates, but the ionic-timepicker.templates.js is not found!!

After I added timepicker into my project, the header-bar/sub-header-bar content shadow. I had try looking the timepicker css also, but I cannot found where to change it? before I added timepicker plugin, its working fine without shadow. thanks for help.

Hi,

Thanks for the hardworking for this plugin, it is awesome.

I do have problem to use the setLabel and closeLabel settings together with ng-translate. ng-translate will return a promise which means that I cannot get the result immediately(when the directive being init/render). I tried the following two methods, but failed.

1. Put the entire $scope.timePickerObject = {...} inside the ng-translate promise
   Result: ionic-timepicker return error because timePickerObject is missing during init

2. Put the entire $scope.timePickerObject = {...} outside the ng-translate promise, but keeping $scope.timePickerObject.setLabel and closeLabel inside the ng-translate promise
   Result: ionic-timepicker runs fine but setLabel and closeLabel settings are not used since the link fxn only runs once at the beginning and there's where setLabel and closeLabel being aside.

Any good idea to resolve this problem? Adding a watch for setLabel and closeLabel will be pretty inefficient though.

Thanks.

I think you forgot to remove a comment.

In ionic-timepicker.module.js

angular.module('ionic-timepicker', [
'ionic-timepicker.provider',
//'ionic-timepicker.templates'
]);

Great work btw.

Your classes 12HourTimePickerChildDiv and 24HourTimePickerChildDiv are invalid.

To be valid the first character must be an underscore (_), a hyphen (-), or a letter(a–z).

This prevent the popup to be customized a little.

I have tried repeatedly to use the picker without your directives for formatting the resulting time and it never work correctly... Is it possible for you to add a sample that does not require your standardTimeNoMeridian and standardTimeMeridian directives? Or just embed them as options for the timePicker?

Hi rajeshwarpatlolla,

Perhaps you can help me. I am having an issue wherein the popup for your timepicker does not show correctly on a mobile device. It grays out the content behind it but the popup is not visible. Please see the below code and attached pictures. (the code is basically not changed from your original implementation)

//CONTROLLER
$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);
}
};

//HTML (I tried to add it here but it doesnt show. sorry new to github.)


</standard-time-meridian

I have also ensured that the module is required in my app module.

If you open datepicker with minutes at zero, the time picker only shows one number, but then if you increase it and go back to zero, it shows 2.

Problem

• Return value (number of seconds) is "local time"
• Turning number of seconds into usable representation (unix timestamp / moment.js) requires unnecessary effort (if timezone offset or DST has to be taken into account)

Possible solution
Always use a unix timestamp representation, both for specifying inputTime and also for return value.

Workaround

I have my time picker in an ionic modal with date picker as well,, the time picker sets the model value correctly,, but not calling the call back method,. on the other hand datepicker is working just fine..

here is my code:

  <ionic-timepicker etime="filterStartTimeDisplay.epochTime"        format="filterStartTimeDisplay.format" step="filterStartTimeDisplay.step"   callback="timePickerCallback">   
         <p > <standard-time-meridian  etime='filterStartTimeDisplay.epochTime'></standard-time-  meridian></p>
          </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
           }
        };

as you can see the object filterStartTimeDisplay is set correctly,, but the time picker callback function is not working... the log is not generated.

Hi Rajesh, the dependencies on your project are out of date. Ionic just went 1.0.

This is the error I'm getting:

Unable to find a suitable version for ionic, please choose one:
    1) ionic#~0.9.27 which resolved to 0.9.27 and is required by ionic-timepicker#0.1.2
    2) ionic#1.0.0 which resolved to 1.0.0 and is required by HelloIonic

Prefix the choice with ! to persist it to bower.json

? Answer: 

How can i display time from 00:00 to 07:00[No need of showing 08:00 to 23.59]?

When I inject the dependency ionic-timepicker to the app module, it get this console error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to: Error: [$injector:modulerr] Failed to instantiate module ionic-timepicker due to: Error: [$injector:nomod] Module 'ionic-timepicker' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.3.13/$injector/nomod?p0=ionic-timepicker

And my whole app went blank... why is that?

I would expect this to say 00 not just 0 for the minutes

And this seems like it should say 12:00 AM not 00:00 AM

If you have any pointers to get this working that would be great, it's a great plugin!

Hi man,

input epoch time doesn't work with getTime() function, what is the error here?

Thanks for all! 👯

Hello rajesh

How do i install this plugin using node js

function timePickerCallback(val) {
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(), ':', selectedTime.getUTCMinutes(), 'in UTC');
}
}

at the code above, return value "val" is in what format? second?

Right now, when I click the button to change the time, the popup showed the current hour, let's say right now is 03:30 PM, but the popup showed only 03:00 PM. So where can I adjust the default time? I had changed it before at .directive, but it still got the same output. Thanks for help.

First of all, thanks for the timepicker.

I have a form with several time fields, and when user taps the time field, I trigger the timepicker. The problem is the keyboard comes up, then the timepicker comes up. Then when you tap anywhere on timepicker the keyboard goes away. I can see this being rather annoying for users since in that scenario the keyboard came up for no reason, and that also adjusts the position of the timepicker. But I also want the user to be able to key in the value if they want too. Is the only solution to use a separate button element to trigger the timepicker? Is there any way to maintain the keyboard open while tapping inside the timepicker? And hide keyboard on timepicker Set or Close?

Any ideas for a solution?

Hello,

After running gulp build on master (no local changes), I get a 404 on the ionic-timepicker.html template. The ionic-timepicker.bundle.min.js is not generated exactly the same as the one in your repository. One difference is shown below - the ionic-timepicker.templates module is no longer present.

From master:

angular.module("ionic-timepicker",["ionic-timepicker.provider","ionic-timepicker.templates"]),angular.module("ionic-timepicker.provider",[]).provider("ionicTimePicker",function(){

After running gulp build on master:

angular.module("ionic-timepicker",["ionic-timepicker.provider"]),angular.module("ionic-timepicker.provider",[]).provider("ionicTimePicker",function(){

It looks like ng-html2js npm module is responsible for this maniplation. I get 2.0.2 when doing npm install. Maybe you have a different version?

Or should I not use gulp build, but instead some other command? Obviously without making any changes there is no point. But I plan to make changes including #73 and then allow changing date +/- a few as well.

Hi First of all thanks for great plugin. I had an issues like when I am selecting time as 12PM it is showing the popup as 12AM . If we select 12AM in popup then it is showing 12PM .It is working reverse only in the case of 12 AM and 12 PM for other hours it is working fine.

I have two timepickers, but it appears the first one's callback is always called.