角度隱藏jQuery DatePicker當單擊外部

我在角度項目中使用jQuery datepicker。角度隱藏jQuery DatePicker當單擊外部

<div> 
    <!-- Anchor that toggles date picker --> 
    <a class="datepicker button dropdown" ng-click="ctrl.showHideDatePicker"> 
    <span>Choose a date</span> 
    </a> 

    <!-- Date picker --> 
    <div ui-date="options" ng-show="ctrl.showDatePicker"></div> 
</div>

問題：的日期選擇器將保持打開狀態，直到我選擇一個日期，或者再次單擊錨標記。

期望的結果：我想在日期選擇器點擊任何外的日期選擇器本身的關閉。

來源

2017-03-16 bruh

您可以將點擊事件添加到正文並檢查目標元素是否爲日期選擇器。如果不是，則隱藏日期選擇器。

不理想，因爲它使用了一些jQuery，但不幸的是，jQuery UI datepicker沒有帶有onBlur事件。

var app = angular.module("app", ["ui.date"]); 
 

 
app.controller("controller", function() { 
 
    var vm = this; 
 

 
    vm.showDatePicker = false; 
 

 
    vm.options = { 
 
    changeYear: true, 
 
    changeMonth: true, 
 
    yearRange: '1900:-0' 
 
    }; 
 

 
    vm.hideDatePickerOnBlur = function($event) { 
 
    var $target = angular.element($event.target); 
 

 
    // Target is the "Choose a date" link 
 
    var isLink = $target.closest("#showDatePicker").length; 
 
    // Target is in the datepicker 
 
    var isDatePicker = $target.closest(".ui-datepicker").length; 
 
    // Target is an element in the header of the datepicker (added this because isDatePicker was false when clicking either arrow even though they are descendants of the datepicker) 
 
    var isHeader = $target.closest(".ui-datepicker-header").length; 
 

 
    if (!isLink && !isDatePicker && !isHeader) { 
 
     vm.showDatePicker = false; 
 
    } 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> 
 
<script src="https://rawgit.com/angular-ui/ui-date/master/dist/date.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"> 
 

 
<body ng-app="app" ng-controller="controller as ctrl" ng-click="ctrl.hideDatePickerOnBlur($event)"> 
 

 
    <div> 
 
    <!-- Anchor that toggles date picker --> 
 
    <a id="showDatePicker" class="datepicker button dropdown" ng-click="ctrl.showDatePicker = true"> 
 
     <span>Choose a date</span> 
 
    </a> 
 

 
    <!-- Date picker --> 
 
    <div ui-date="options" ng-show="ctrl.showDatePicker"></div> 
 
    </div> 
 

 
</body>

來源

2017-03-17 02:17:16 Jaydo

角度隱藏jQuery DatePicker當單擊外部

回答

相關問題