I am trying to display an AngularJS Bootstrap calendar only upon clicking a button, and I want to restrict it from appearing when clicking on the input field. Below is my code:
<input type="text"
onkeydown="return false;"
onkeyup="return false;"
id="dateFrom"
placeholder="{{datePlaceholder}}"
datepicker-popup="{{format}}"
ng-model="leadFormData.myDate"
is-open="field.opened"
close-text="Close"
name="Received On"
max="maxDate"
min="minDate"
data-ng-disabled="disableDate"
class="calendar-view" />
<button style="height:34px;" class="btn btn-default" ng-click="open($event)">
<i class="icon-calendar"></i>
</button>
I have created an open function that should be triggered upon the button click, however, it is not working as expected. Can you please help me identify where the issue might be?
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.field.opened= true;
};