如何仅在使用角度引导ui的按钮单击上显示日期选择器？

Question

I want to show an AngularJS Bootstrap calendar on a button click only and restrict it on the click of input field, here 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>

Here is the open function called on the click of button , it is not working and I don't know why? Kindly tell me where's i'am going wrong?

 $scope.open = function($event) {
                    $event.preventDefault();
                    $event.stopPropagation();
                    $scope.field.opened= true;
                    };

Answer 1

I used angular bootstrap ui date picker in my project. It may solved your problem.

In HTML file:

<input type="date" 
    id="startDate"
    class="form-control" 
    onkeydown="return false;"
    onkeyup="return false;"
    datepicker-popup 
    data-ng-model="searchQuery.startDate" 
    is-open="startDateOpened" 
    datepicker-options="dateOptions" 
    show-button-bar="false" />
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="fa fa-calendar"></i></button>

and in controller:

$scope.open = function($event) {
            $event.preventDefault();
            $event.stopPropagation();

            $scope.startDateOpened = true;
        };
$scope.dateOptions = {
            formatYear: 'yy',
            startingDay: 1
        };