带有引导程序 ui-datepicker 的 Angularjs

Posted

技术标签:

【中文标题】带有引导程序 ui-datepicker 的 Angularjs【英文标题】:Angularjs with bootstrap ui-datepicker 【发布时间】:2019-05-13 06:46:07 【问题描述】:

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

** 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();
        
      ;
    );

当元素点击时,如何调用datepicker的方法? 任何帮助,将不胜感激。谢谢。

【问题讨论】:

范围对象中如何调用datepicker的方法? 【参考方案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>

【讨论】:

对不起,在link函数中不能调用datepicker的方法?因为我要获取 datepicker 的日期时间。

以上是关于带有引导程序 ui-datepicker 的 Angularjs的主要内容,如果未能解决你的问题,请参考以下文章

带有 Thymeleaf 的标签引导程序

带有引导程序的 jquery 脚本顺序

带有引导程序的Angular2动画

带有引导程序的 django modelform

使用带有 Angular2 应用程序的引导程序的问题

带有 vue js 组件的轮播引导程序