角引导日期选择器 - 禁用所有日期，除了指定列表

我一直停留在这个问题上进行了两天了，我找不到任何合适的例子在线帮助。我从一个休息服务中得到一个日期列表，我需要在可供选择的角度日期选择器中提供。当我有这个列表时，我需要禁用日期选择器中的其他日期。这里是我当前的代码例子来说明这一点 -角引导日期选择器 - 禁用所有日期，除了指定列表

下面是一个plunker - https://plnkr.co/edit/8zncfr2VBayaO7wRFV4C?p=preview

HTML片段---

<div role="tabpanel" class="tab-pane" id="calender"> 
    <h3 class="map_tab_title"> Select Days </h3> 
    <div uib-datepicker ng-model="date_pick" datepicker-options="options" date-disabled="disabled(data)"> 
    </div> 
    <button type="submit" class="btn book_now_btn" ng-click="goToBookPage()">final step <span> input your information </span>  
    </button> 
</div>

ANGULAR片段 -

$scope.dates = response.data.outgoing.dates; 
$scope.date_pick = Date.parse($scope.dates[0]); 

$scope.today = function(){ 
    $scope.date_pick = new Date(); 
}; 
$scope.today(); 
$scope.options = { 
    minDate: new Date(), 
    showWeeks: false 
}; 

function areDatesEqual(date1, date2) { 
    return date1 == date2; 
} 
$scope.disabled = function(data) { 
    console.log("TRIGGERED"); 
    var date = data.date, 
     mode = data.mode; 
    var isRealDate = false; 
    for (var i = 0; i < $scope.dates.length; i++) { 
     if (areDatesEqual($scope.dates[i], date)) { 
      isRealDate = true; 
     } 
    }     
    return (mode === 'day' && isRealDate); 
};

能有人帮我与此。我很茫然。在此先感谢！

来源

2016-09-20 sgpbyrne

[这个问题]（http://stackoverflow.com/questions/36244859/disable-all-dates-on-load-of-calendar-and-enable-specific-dates -in-angularjs-on）听起来很不错类似于你以后的样子。 – Lex

谢谢@Lex - 我已经看到了这一点，并试图实现它，但它似乎并没有为我工作。 – sgpbyrne

你可以给一个plunker或你想在你的比较中禁用的功能循环中的数据？事端！ –

感谢汉斯你的答案的变化几乎没有变化 - 在这里，对我来说到底有什么工作 -

https://plnkr.co/edit/P9bF18XemufyLXN75b7k?p=preview

HTML SNIPPET -

<div ng-controller="MainController"> 
    <h3> Select Days </h3> 
    <div uib-datepicker ng-model="date_pick" datepicker-options="options"> 
    </div> 
</div>

ANGULAR片段 -

$scope.dates = ["2016-09-26", "2016-09-28", "2016-09-29"]; 
$scope.date_pick = Date.parse($scope.dates[0]); 

$scope.today = function() { 
    $scope.date_pick = new Date(); 
}; 
$scope.today(); 

$scope.options = { 
    dateDisabled: disabledTest, 
    showWeeks: false 
}; 

var dayDuration = 60 * 60 * 24 * 1000; 

function areDatesEqual(date1, date2) { 
    return (parseInt(date1/dayDuration)) == (parseInt(date2/dayDuration)); 
} 

function disabledTest(data) { 
    var date = data.date, 
    mode = data.mode; 

    var isRealDate = false; 
    for (var i = 0; i < $scope.dates.length; i++) { 
    var changedDate = Date.parse($scope.dates[i]); 
    if (areDatesEqual(changedDate, date)) { 
     isRealDate = true; 
    } 
    } 
    return mode === 'day' && !isRealDate; // && (date >= $scope.endDate); 
}

来源

2016-09-21 20:44:03 sgpbyrne

好像你做了错误。 dateDisable是一个日期选择器选项，您可以实现dateDisable的函数。

下面是根据您的script.js

angular.module('plunker', ['ui.bootstrap', 'ngAnimate']) 
.controller("MainController", ["$scope", function($scope) { 
    $scope.dates = ["9/26/2016", "9/28/2016", "9/29/2016"]; 
    $scope.date_pick = Date.parse($scope.dates[0]); 

    $scope.today = function() { 
    $scope.date_pick = new Date(); 
    }; 
    $scope.today(); 
    function areDatesEqual(date1, date2) { 
    return date1 == date2.toLocaleDateString() 
    } 

    // *******we don't need this code*******// 
    $scope.disable = function(data) { 
    var date = data.date, mode= data.mode; 
    var isRealDate = false; 
    for (var i = 0; i < $scope.dates.length; i++) { 
     if (areDatesEqual($scope.dates[i], date)) { 
     isRealDate = true; 
     } 
    } 
    return (mode === 'day' && isRealDate); 
    }; 
    //**************// 

    $scope.options = { 
    minDate: new Date(), 
    showWeeks: false, 
    //********************************** 
    //// Here's changed part - add new option dateDisabled 
    dateDisabled:function(data) { 
     console.log("here") 
     var date = data.date, mode= data.mode; 
     var isRealDate = false; 
     for (var i = 0; i < $scope.dates.length; i++) { 
     if (areDatesEqual($scope.dates[i], date)) { 
      isRealDate = true; 
     } 
     } 
     return (mode === 'day' && isRealDate); 
    } 
    }; 
}]);

而在HTML代码

<div uib-datepicker ng-model="date_pick" datepicker-options="options">

来源

2016-09-21 20:32:56

BTW好像你的帖子在upwork关闭？ –

是的，有下面的解决方案有 - 非常相似，你贴这里免费的一个： – sgpbyrne

耶实际上它是在检查日期相同，但变化不大:) –

我知道这是一个老问题，但我一直在这个问题最近挣扎，我想分享我的工作plunker，凭什么我认为这是一个清洁的解决方案：

http://embed.plnkr.co/pf5Kw2/

来源

2017-11-12 01:12:22 hmartos

角引导日期选择器 - 禁用所有日期，除了指定列表

回答

相关问题