CODEWITHSUNDEEP
javascriptjqueryangularjsjquery-ui
Alex
Alex

Reputation: 2800

Why is this JQuery date picker not loading for the first ng-click?

I have a JQuery UI date picker being loaded through ng-click using the following code:

Input:

<input type="text" id="datepicker" autocomplete="off" ng-model="selectedDate" 
ng-click="showDatepicker()" placeholder="(Click to select date)">

JS:

$scope.showDatepicker = function() {
    console.log('clicked');

    // Load datepicker
    $("#datepicker").datepicker();
  }

However the date picker is not displaying on the first click, only on the second. How can I fix this so that it displays on the first click of the input?

Fiddle: https://jsfiddle.net/Lt7aP/5556/

Upvotes: 0

Views: 592

Answers (2)

Durga
Durga

Reputation: 15614

function LoginController($scope) {
  $scope.onLoad = function(){
   $("#datepicker").datepicker();
  }
  $scope.showDatepicker = function() {
    console.log('clicked');
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div ng-app ng-controller="LoginController" ng-init='onLoad()'>
  <input type="text" id="datepicker" autocomplete="off" ng-model="selectedDate" ng-change="dateFilter('selectedDate')" ng-click="showDatepicker()" placeholder="(Click to select date)">
</div>

Create datepicker instance on initialization.

Upvotes: 1

Jasper Seinhorst
Jasper Seinhorst

Reputation: 1074

Because you are initiating the datepicker on click. It should be initiated before you click so it will actually work when you click (or focus)

So add 

$("#datepicker").datepicker();

At the start of your controller and remove the ng-click attribute. It should work that way.

You can validate this by clicking two times on the input field in your fiddle. The second time it will work because it is initiated

Upvotes: 1

Related Questions