首页 文章

角度bootstrap datepicker手柄关闭/模糊

提问于
浏览
1

我使用angular bootstrap datepicker:

<input type="text" size="7" class="round boxsiz date_picker" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" ng-click="open1()" datepicker-append-to-body="true"/>
<button type="button" class="btn btn-default btn-calendar" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>

我想点击关闭或在datepicker表单之外的某个地方处理这个关闭/模糊事件并执行一些功能(添加/删除其他元素的类)?

1 回答

  • 1

    这是一个针对你的问题的plunker演示 . 下面是我们如何处理datepicker popup的close事件的代码片段 .

    $scope.$watch('popup1.opened', function(newVal, oldVal) {
                if (newVal != oldVal && !newVal) {
                    console.log('popup1 closed');
                    $scope.calendarName1 = 'Calender 1';
                }
            }, true);
    

    关闭弹出窗口 is-open 属性ng-model时会更改 $scope.popup1.opened . 这是我们要观察的目标,关闭时执行操作我已经使用了 $watch() 来观察范围变量并执行所需的操作 . 内部观察者你可以呼叫功能也是 .

    在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" />
    

    类似地,我们甚至可以通过简单地调用下面的代码来改变日期时调用我们的函数

    $scope.$watch('dt', function(newVal, oldVal) {
            if (newVal != oldVal) {
                console.log('date changed');
                $scope.dateChanged = 'Hey you changed date';
            }
        }, true);
    

相关问题