角引導日期選擇器 - 禁用所有日期，除了指定列表

我一直停留在這個問題上進行了兩天了，我找不到任何合適的例子在線幫助。我從一個休息服務中得到一個日期列表，我需要在可供選擇的角度日期選擇器中提供。當我有這個列表時，我需要禁用日期選擇器中的其他日期。這裏是我當前的代碼例子來說明這一點 -角引導日期選擇器 - 禁用所有日期，除了指定列表

下面是一個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

角引導日期選擇器 - 禁用所有日期，除了指定列表

回答

相關問題