앵귤러 부트 스트랩 Datepicker - 지정된 목록을 제외한 모든 날짜 사용 안 함

Question

저는 이틀 동안이 문제에 얽혀 있었고 온라인으로 도움이되는 적절한 예제를 찾을 수 없습니다. 나는 각도 데이트 피커 안에서 선택할 수 있도록해주어야하는 휴식 서비스에서 날짜 목록을 얻고 있습니다. 이 목록이 있으면 datepicker에서 다른 모든 날짜를 비활성화해야합니다. 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 SNIPPET -

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

하는 사람이 도와 주실 래요 이걸로 나. 나는 실종됐다. 미리 감사드립니다.

Answer 1

감사 한스의 변화에 ​​따라 거의 변화입니다 - 여기 결국 나를 위해 일한 무엇 -

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 SNIPPET -

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

Answer 2

실수로 생각한 것 같습니다. 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"> 

Answer 3

나는이 오래된 질문 알아요,하지만 난 최근에이 문제를 고민 한 나는 내가 즉 생각과 내 작업 plunker를 공유 할 깨끗한 용액 :

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