Cant seem to get the selected time value

[asterzwx]

Hi im trying to get the selected time so for e.g.: The user changes time to 05:10 in the popup and clicks ok, i want to be able to get the 05:10. I tried testing with simple ionic popup in the ion-datetime-picker.min.js file so that i can know which line of code handles the ok onclick event. However i still cant find it after several attempts.

Does anyone know how to do it? Any help is much appreciated. Thank you.

[katemihalikova]

Hi, the directive is ng-model-enabled so you could use anything you use for e.g. input elements, including ng-change attribute. The model is simple javascript Date object so you can use its methods to get the time in a format you need.

[asterzwx]

I see, thank you for the advice. However, I've managed to find which line handles the ok onclick event and I was able to retrieve the selected values using e.bind.hour and e.bind.minute instead to show in console.log. Now I have another issue which is to make use of these selected values in another js file so I can display them back to the user. I've tried using app.factory to make the entire function in ion-datetime-picker.min.js global but cant get it to work. But tested with a simple global variable is working fine, I guess this is because the global var is not stored in multi level functions like e.bind.hour? May I know if this is the correct way to do it or is there more to it as I'm trying to retrieve something so deep within functions? Thanks a lot in advance.

[katemihalikova]

It seems you are missing how angular itself works. You don't need to change anything in the plugin files or hack into its data, everything is already prepared for your use-case. Maybe sharing some of your code in a codepen would help me to turn you into right direction.

[asterzwx]

Hi, here is the codepen that I've modified: http://codepen.io/asterzwx/pen/dMLwaO Please do provide some feedback so I will know what I am doing right or wrong. Thank you so much.

[katemihalikova]

You either use <input> or ion-datetime-picker to let user select the time, not both. http://codepen.io/katemihalikova/pen/MyRLvY

[asterzwx]

Its actually working fine in your demo so thanks a lot for that. However I'm trying to use $rootScope.timeValue.getHours() + ':' + $rootScope.timeValue.getMinutes() in my controller.js instead but its not working. I followed your demo closely and I already have the dependencies added in my app.js too. But the time value that was shown in the alert was current time and not what I've selected. Any idea why?

[asterzwx]

Do I need to include "ionic", "ion-datetime-picker" in my controller.js as well? Btw, controller.js is where all my controllers are at.

[katemihalikova]

Let's include all your code into a codepen.

[asterzwx]

Ok, I'll try to get my code up soon. However, I just tried your code again and it doesn't seem to be working. When the pop up appears it displays current time instead of the selected time. That's so weird because it was working fine the day before.

[katemihalikova]

I have fixed the codepen - by using controller you introduced scope inheritance and you was using it wrong so there were two time values, one in root scope, and one in controller scope, the latter one shadowing the former one.

[asterzwx]

Oh I see... I finally got it working now. Thank you so much for your help, really appreciate it. Just another question, how does the controller know that it should get the value from ng-model="$root.timeValue" instead of {{timeValue | date: 'H:mm'}} as both are also called timeValue ?

[katemihalikova]

{{timeValue}} is just reading the value. It looks at the current scope and if not found, looks at the parent scope and so on until found (simply said). So {{timeValue}} goes up until the root scope where that variable is found. In this codepen, timeValue === $root.timeValue. As a common solution to those problems, you should always have a dot in your variable in ng-model.

[asterzwx]

Oh ok, now I understand better. Once again thank you very much for your time and help :)