Question

如果日期已经包含3个或更多事件，我正在尝试在连接到Google日历的UI Bootstrap Datepicker中禁用日期。

到目前为止，我使用Angular Factory获取了一系列事件：

gardenpage.factory('Dates', function($http, $q) {
var deffered = $q.defer();
var data = [];  
var Dates = {};

Dates.async = function() {
   $http.get('http://localhost:7777/events')
   .success(function (d) {
   data = d;
   deffered.resolve();
});
return deffered.promise;
};
Dates.data = function() { return data; };

return Dates;
});

日期列表需要更多的预处理，所以我有一个函数，只在范围变量中包含3个或更多条目的日期：

$scope.occurences = ['2014-07-21','2014-07-28'];

现在终于这是我修改后的默认UI Bootstrap日期选择器日期禁用功能：

// Disable weekend selection
$scope.disabled = function(date, mode) {

return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 || 
$scope.date_occurences.indexOf( $filter('date')(date, 'yyyy-MM-dd') ) !== -1 ));
};

除了一个小怪癖之外它按预期工作，当日期选择器调用“禁用”函数时，数组为空，等待我假设的异步回调。这就是为什么我首先选择日期选择器中的日期，因为我的日期被禁用了。

那么如何在调用日期选择器禁用功能之前获取回调，或者如何让它等待？一种替代方法可能是在回调到达后刷新Datepicker，但我不确定日期选择器上是否存在该函数。

Answer 1

我没有完全解决这个问题，但有点解决方法：

1。使用了我在堆栈溢出注释http://plnkr.co/edit/Xwq7YtAD6qNHQw1aES3H?p=preview中找到的小代码。这让你可以调用Angular-UI Bootstrap Datepicker＆＃34; refreshView＆＃34;使用按钮或其他类型的动作。基本上建立一个新的指令

`app.directive('jmDpRefreshView',function() {
   var noop = function(){};
   var refreshDpOnNotify = function (dpCtrl) {
     return function() {
       dpCtrl.refreshView();
     };
   };
return {
  require: 'datepicker',
  link: function(scope,elem,attrs,dpCtrl) {
    var refreshPromise = scope[attrs.jmDpRefreshView];
    refreshPromise.then(noop,noop,refreshDpOnNotify(dpCtrl));
   } 
 };

}）;`

调用refreshView功能

$scope.toggleDisableMode = function() { dateDisableDeferred.notify(new Date().getTime()); };

可以使用任何类型的操作调用toggleDisableMode函数，例如使用按钮禁用服务器中的日期：＆＃34; ng-click =＆＃39; toggleDisableMode（）＆＃39;＆＃34;

可能对您有帮助的另一件事是您可以从服务器预加载日期

//preload
$scope.dates = disable_dates();

function disable_dates() {
    console.log("disable dates function")
    Dates.async().then(function() {
        $scope.data = Dates.data();
        //do whatever you like with your data
    });
}

或者你可以调用＆＃34; .notify（）＆＃34;对于从服务器获取数据时的延迟，并且在完成后将禁用。

    function disable_dates() {
    console.log("disable dates function")
    Dates.async().then(function() {
        $scope.data = Dates.data();
        //console.log($scope.data )
        //do whatever you like with your server data.

        //notice this line, calls the disable function
        dateDisableDeferred.notify(new Date().getTime());
    });
}

此解决方案归因于此问题及其中的评论： angular ui datepicker refresh disabled dates

使用工厂响应UI Bootstrap Datepicker禁用日期

1 个答案: