利用工厂响应UI引导日期选择器禁用日期 [英] Disable dates using factory response UI Bootstrap Datepicker

问题描述

我试图禁用如果日期已经有3个或更多的事件连接到谷歌日历的界面引导日期选择器的日期。

I'm trying to disable a date in the UI Bootstrap Datepicker connected to a Google calendar if that dates already have 3 or more events.

到目前为止我得到使用角厂这样的事件的数组：

Thus far I get the array of events using an Angular Factory like this:

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;
});

日期列表需要更多的preprocessing让我有放有3个或更多条目的范围变量的唯一日期的功能：

The list of dates needs a bit more preprocessing so I have a function that puts the only dates that have 3 or more entries in a scope-variable:

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

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

Now finally this is my modified default UI Bootstrap date picker date disable function:

// 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 ));
};

据按预期工作，除了一个小怪癖，当禁用功能通过日期选择器调用，数组为空，等待回调异步我presume。这就是为什么它是第一个，我选择我的日期被禁用在日期选择器的日期。

It works as expected except for one little quirk, when the "disabled" function is called by the date picker, the array is empty, waiting for the async callback I presume. Which is why it's first as I select a date in the date picker as my dates gets disabled.

那么如何获得日期选取器之前，禁止回调函数被调用，或者我怎么让它等待？一种选择可能是刷新日期选择器回调已经到来之后，但我不知道，如果在日期选择器中存在的功能。

So how to get the callback before the date picker disable function is called, or how do I make it wait ? One alternative might be to refresh the Datepicker after the callback has arrived, but I'm not sure if that function exists on the date picker.

推荐答案

我不解决这个问题正好与上面，但有点一种解决方法：

I didn't solve this exactly as stated above but a bit of a workaround:

1。
用一个小code，我在一个堆栈溢出评论发现的http：// plnkr .CO /编辑/ Xwq7YtAD6qNHQw1aES3H？p = preVIEW 。它可以让你叫角UI引导日期选择器refreshView用按钮或其他类型的动作。基本上建立一个新指令

1. Used a small code that I found in a stack overflow comment http://plnkr.co/edit/Xwq7YtAD6qNHQw1aES3H?p=preview . Which lets you call the Angular-UI Bootstrap Datepicker "refreshView" using a button or other type of action. Basically setting up a new directive

`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功能

To call the refreshView functionality

$ scope.toggleDisableMode =功能（）{
    dateDisableDeferred.notify（新的Date（）的getTime（））;
  };

该功能可以toggleDisableMode使用任何类型的动作，例如使用按钮禁用从服务器日期被称为：NG点击='toggleDisableMode（）'。

The function toggleDisableMode can be called using any type of action, for instance using a button to disable dates from the server: "ng-click='toggleDisableMode()'"

这可以帮助你的另一件事情是不是你可以preLOAD您的日期从服务器

Another thing that might help you is either you could preload your Dates from the server

//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
    });
}

或者你也可以称之为.notify（）为当数据已经从服务器获得的，它会关闭，当它完成推迟。

Or you could call the ".notify()" for the deferred when the data has been fetched from the server and it will disable when it is done.

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

此解决方案是由于这个问题，并在那里的说明：
<一href=\"http://stackoverflow.com/questions/25840819/angular-ui-datepicker-refresh-disabled-dates\">angular UI日期选择器刷新禁用日期

This solution is attributed to this question and the comments in there: angular ui datepicker refresh disabled dates

这篇关于利用工厂响应UI引导日期选择器禁用日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！