Angularjs 与 bootstrap ui-datepicker

Question

如何控制日期选择器对象调用open/close日期选择器的方法。如何在另一个 angularjs 指令中获取日期选择器对象。

** HTML **

<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" picker-date />

指令：

   module.directive('pickerDate', function() {
      return {
        restrict: 'A',
        priority: 1,
        require: 'ngModel',
        link: function(scope, element, attrs, ctrl) {
          console.log(ctrl)
          element.on('click', function() {                
          });
          // console.log();
        }
      };
    });

点击元素时，如何调用日期选择器的方法？任何帮助，将不胜感激。谢谢。

Answer 1

在 html 中，您有 is-open="popup1.opened"。因此，您可以通过更改 $scope.popup1.opened.

的布尔值来控制它

$scope.popup1.opened = true; // open date picker
$scope.popup1.opened = false; // close date picker

如果你想在点击一个元素时改变它，你可以使用ng-click。例如 :

<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" picker-date />
<button type="button" ng-click="popup1.opened = !popup1.opened"></button>

Angularjs 与 bootstrap ui-datepicker

Angularjs with bootstrap ui-datepicker

javascript

datepicker

angularjs

angularjs-bootstrap