gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 21:41:46 26 4
gpt4 key购买 nike

如果该日期已经有 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,但我不确定日期选择器上是否存在该函数。

最佳答案

我没有完全按照上面的说明解决这个问题,而是解决了一些解决方法:

1.
使用了我在堆栈溢出注释中找到的一小段代码 http://plnkr.co/edit/Xwq7YtAD6qNHQw1aES3H?p=preview .这使您可以使用按钮或其他类型的操作调用 Angular-UI Bootstrap 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());
});
}

这个解决方案归因于这个问题和那里的评论:
angular ui datepicker refresh disabled dates

关于angularjs - 使用工厂响应 UI Bootstrap Datepicker 禁用日期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24985387/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com