Onsen UI & AngularJS: Show / trigger native Datepicker after click

Question

I use a input to edit a date. Initially, The input is hidden and is replaced by a div with the birthdate and a edit-Icon. After a click on the div, the input will be shown. Everything works fine, but how can trigger / click programmatically on the input to show the native date wheel in iOS? Thank you for your tips

Currently the user has to click on the input. With the following JS, I get an error: Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite!

HTML

<div class="profile-birthdate" ng-click="openBirthdate(); bEdit = !bEdit" ng-hide="bEdit">{{ birthDate | date: 'dd.MM.yyyy' }} <i class="fa fa-pencil fa-profile-edit"></i></div>
<div class="profile-birthdate"  ng-click="bEdit = !bEdit" ng-show="bEdit"><input id="birthDateChange" type="date" ng-model="birthDate"> <i class="fa fa-check fa-profile-edit"></i></div>    

JS

$scope.openBirthdate = function () {
      $timeout(function() {
          angular.element('#birthDateChange').trigger('click');
       }, 100);
}; 

Answer 1

The best way to solve this issue is to use jQuery instead of jqLite

In order to keep Angular small, Angular implements only a subset of the selectors in jqLite. This error occurs when a jqLite instance is invoked with a selector other than this subset.

Try including jQuery before AngularJS, if you have still the same issue, try the AngularJS shim in this way:

shim: {
   angular: {
       deps: ['jquery'],
       exports: "angular"
   },
},

Hope it helps!