使用工厂响应UI引导日期选择器禁用日期

一尘不染

使用工厂响应UI引导日期选择器禁用日期

angularjs

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

到目前为止，我是使用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;
});

日期列表需要更多的预处理，因此我有一个函数可以将只有三个或三个以上条目的日期放在范围变量中：

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

它可以按预期工作，除了一个小问题之外，当日期选择器调用“
disabled”功能时，该数组为空，等待我假定的异步回调。这就是为什么在禁用日期时在日期选择器中选择一个日期时首先使用它的原因。

因此，如何在调用日期选择器禁用功能之前获取回调，或者如何使其等待？一种选择可能是在回调到达后刷新Datepicker，但是我不确定该函数是否在日期选择器上存在。

阅读 191

2020-07-04

共1个答案

一尘不染

我没有完全按照上述说明解决此问题，但有一些解决方法：

1.使用了一个我在堆栈溢出注释中找到的小代码 http://plnkr.co/edit/Xwq7YtAD6qNHQw1aES3H?p=preview。通过该按钮，您可以使用按钮或其他类型的动作将Angular-
UI引导程序Datepicker称为“ refreshView”。基本上设置一个新指令

`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，例如使用按钮来禁用服务器中的日期：“ ng-click
=’toggleDisableMode（）’”

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

//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（）”，完成后它将禁用。

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

2020-07-04