angular UI bootstrap datepicker can't get value using JQuery expression

Question

I'm using datepicker from angular UI bootstrap lib. https://angular-ui.github.io/bootstrap/#/Datepicker

after select date, I'm not able to get the text of input using JQuery expression. $('#effectiveDate').text() is always returning empty, but I can see it has value on the page.

What can I do to retrieve this value?

updates: in chrome console,

$('#effectiveDate') returns:

[<input id="effectiveDate" name="effectiveDate" type="text" class="form-control pickdaterInput ng-valid ng-isolate-scope ng-valid-date ng-dirty ng-valid-parse ng-touched" datepicker-popup="dd-MMMM-yyyy" ng-model="elt.registrationState.effectiveDate" is-open="opened" min-date="minDate" datepicker-options="dateOptions" close-text="Close">]

$('#effectiveDate').text(); returns;

""

angular.element($0).scope().elt.registrationState.effectiveDate returns:

Tue Jul 14 2015 00:00:00 GMT-0400 (Eastern Daylight Time)

but in Selenium:

        JavascriptExecutor js = (JavascriptExecutor) driver;
    String effectiveDate_string = js.executeScript("angular.element($0).scope().elt.registrationState.effectiveDate.getTime().toString()").toString();

gives error:

org.openqa.selenium.WebDriverException: unknown error: $0 is not defined
(Session info: chrome=43.0.2357.132)
(Driver info: chromedriver=2.14.313457   (3d645c400edf2e2c500566c9aa096063e707c9cf),platform=Windows NT 6.1 SP1 x86_64)   (WARNING: The server did not provide any stacktrace information)
Command duration or timeout: 9 milliseconds

i think u can get the value using the ngmodel of your element with $scope.myPickerInput — Vanojx1
– Vanojx1, Commented Jul 13, 2015 at 14:44
Use ng-model see example here jsfiddle.net/cletourneau/kGGCZ — Navaneet
– Navaneet, Commented Jul 13, 2015 at 14:53
@Vanojx1 if I run this in chrome, I'm able to retrieve the value of date in million seconds. angular.element($0).scope().elt.registrationState.effectiveDate.getTime().toString() but when I run this code in selenium String effectiveDate_string = js.executeScript("angular.element($0).scope().elt.registrationState.effectiveDate.getTime().toString()").toString(); it gives error:org.openqa.selenium.WebDriverException: unknown error: $0 is not defined — Peter Huang
– Peter Huang, Commented Jul 13, 2015 at 15:23
cant understand why u re using angular.element method when you can use the scope value, have you tried that?? — Vanojx1
– Vanojx1, Commented Jul 13, 2015 at 15:33
$scope is undefined when I tried to run this in chrome console: $scope.elt.registrationState.effectiveDate — Peter Huang
– Peter Huang, Commented Jul 13, 2015 at 15:35

SoEzPz · Accepted Answer · 2015-07-13 17:30:33Z

1

Did you try clicking on the actual input element in Chrome (firefox) and then typing this in the console?

 angular.element($0).val()

Also, did you try this

 $('#effectiveDate').val()

instead of this

$('#effectiveDate').text()

UPDATE

regarding the comment

this is $('#effectiveDate') returns: []

$('#effectiveDate')[0].val()

The reason is that when you are calling $('#effectiveDate') you are getting an array with only one value that you care about, which means you have to get the first item of the array, thus [0]. You may also try this for more readability.

$('#effectiveDate').first().val();

edited Jul 13, 2015 at 17:30

answered Jul 13, 2015 at 15:40

SoEzPz

16k8 gold badges64 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Peter Huang Over a year ago

$('#effectiveDate').val() and $('#effectiveDate').text() don't work in console. angular.element($0).val() works in console. but when I using selenium run this: JavascriptExecutor js = (JavascriptExecutor) driver; String effectiveDate_string = js.executeScript("angular.element($0).scope().elt.registrationState.effectiveDate.getTime().toString()").toString(); it gives error: org.openqa.selenium.WebDriverException: unknown error: $0 is not defined

SoEzPz Over a year ago

First, check and see that $('#effectiveDate') returns an actual DOM element. If it does not, TS why it is not on the page. Perhaps you have an ng-if that isn't creating it when you think it should be there. Let me know what you find when you check for the element.

Peter Huang Over a year ago

this is $('#effectiveDate') returns: [<input id="effectiveDate" name="effectiveDate" type="text" class="form-control pickdaterInput ng-valid ng-isolate-scope ng-valid-date ng-dirty ng-valid-parse ng-touched" datepicker-popup="dd-MMMM-yyyy" ng-model="elt.registrationState.effectiveDate" is-open="opened" min-date="minDate" datepicker-options="dateOptions" close-text="Close">]

SoEzPz Over a year ago

great! now just call $('#effectiveDate')[0].val().

SoEzPz Over a year ago

would you say this answered your question?

|

Collectives™ on Stack Overflow

angular UI bootstrap datepicker can't get value using JQuery expression

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related