angularjsで日数を動的に無効にしたい

Question

（Sun、Mon）のような日を動的に無効にしたいと考えています。日はデータベースからフェッチされます。私は角度js Ui-bootstrapとuiブートストラップを使用しています。私のデータベースでは、私は唯一の日数（日、月）を保存します。だから、私はこれらの日を変換し、それをUiブートストラップのカレンダーに渡して、その日を無効にすることができます。私のコントローラjs。

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

$scope.clear = function() { 
    $scope.dt = null; 
}; 

$scope.inlineOptions = { 
    customClass: getDayClass, 
    minDate: new Date(), 
    showWeeks: true 
}; 

$scope.dateOptions = { 
    dateDisabled: disabled, 
    formatYear: 'yy', 
    startingDay: 1 
}; 

console.log($scope.dateOptions); 
function disabled(data) { 
    var date = data.date, 
      mode = data.mode; 
    console.log(data); 
     return mode === 'day' && (date.getDay() === 0); 
} 

$scope.toggleMin = function() { 
    $scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date(); 
    $scope.dateOptions.minDate = $scope.inlineOptions.minDate; 
}; 

$scope.toggleMin(); 

$scope.open1 = function() { 
    $scope.popup1.opened = true; 
}; 


$scope.setDate = function (year, month, day) { 
    $scope.dt = new Date(year, month, day); 
}; 

$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate']; 
$scope.format = $scope.formats[0]; 
$scope.altInputFormats = ['M!/d!/yyyy']; 

$scope.popup1 = { 
    opened: false 
}; 


var tomorrow = new Date(); 
tomorrow.setDate(tomorrow.getDate() + 1); 
var afterTomorrow = new Date(); 
afterTomorrow.setDate(tomorrow.getDate() + 1); 
$scope.events = [ 
    { 
     date: tomorrow, 
     status: 'full' 
    }, 
    { 
     date: afterTomorrow, 
     status: 'partially' 
    } 
]; 

function getDayClass(data) { 
    var date = data.date, 
      mode = data.mode; 
    if (mode === 'day') { 
     var dayToCheck = new Date(date).setHours(0, 0, 0, 0); 

     for (var i = 0; i < $scope.events.length; i++) { 
      var currentDay = new Date($scope.events[i].date).setHours(0, 0, 0, 0); 

      if (dayToCheck === currentDay) { 
       return $scope.events[i].status; 
      } 
     } 
    } 

    return ''; 
} 

マイHTMLページ

<div class="input-group"> 
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" /> 
<span class="input-group-btn"> 
    <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button> 
    </span></div> 

Answer 1

私ははっきりとあなたの質問を理解してかはわからないが、私はショットを取りますよ。カレンダーの特定の日を無効にする場合は、「dateDisabled」attributeを使用してみてください。

dateDisabled ({date: date, mode: mode}) - An optional expression to disable 
visible options based on passing an object with date and current mode 
properties. 

このメソッドの中で、有効にする日付を決定するために、このような操作を行うことができます。

<div ng-controller="DatepickerDemoCtrl as demo"> 
    <input type="text" 
     uib-datepicker-popup="{{demo.dateFormat}}" 
     ng-model="demo.date" 
     date-disabled="demo.disabled(date)"/> 
</div> 

// Disable weekend selection 
vm.disabled = function(date) { 
    return (date.getDay() === 0 || date.getDay() === 6); // Sun or Sat 
}; 

さらに詳しい情報やコード例をご提供いただければ、より多くの情報を提供することができます。

Answer 2

カレンダーに現在表示されている特定の日付とデータベースの日付を比較する関数を作成する必要があります。

$scope.myDisabledDates = ['2017-08-03','2017-08-16','2017-08-29']; 
$scope.options = { 
    dateDisabled: disabled, 
    startingDay: 1 
}; 

function disabled(data) { 
    var date = data.date.toISOString().slice(0, 10), 
     mode = data.mode; 

    return mode === 'day' && $scope.myDisabledDates.indexOf(date) > -1; 
} 

ここで働いてplnkr https://plnkr.co/edit/PIeVRsFs8GFvKhYUEkDU?p=preview