想要在angularjs中動態禁用天數

我想要動態禁用像（Sun，Mon）這樣的日子。天將從數據庫中提取。我正在使用角度js Ui-bootstrap的ui bootstrap。在我的數據庫中，我只存儲了幾天（Sun，Mon）。那麼，如何將這些日子轉換成ui bootstrap的日曆，以便這些日子將被禁用。我的控制器js。想要在angularjs中動態禁用天數

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

來源

2017-08-01 rohit raut

分享你的代碼是什麼，你做了 –

週日，週一表示一個日曆或什麼都星期日和星期一？ – anu

沒有任何一天不只是太陽，星期一。它可能是週三或週六或週五的任何一天。 –

我不知道如果我理解你的問題清楚，但我會採取了一槍。如果您嘗試禁用日曆中的特定日期，請嘗試使用「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 
};

如果您提供更多信息或代碼示例，我可能會提供更多幫助。

來源

2017-08-01 12:37:02

@Smeshead Sev你的代碼是正確的，但我的日子是動態的，它們不是靜態的。 –

@rohit raut我將不得不測試它，但我會假設日期禁用字段在摘要週期中進行評估。如果您使用由數據服務設置的變量來比較而不是靜態數字，我相信它會起作用。 –

您必須創建一個函數，將日曆中當前可見的特定日期與數據庫中的日期進行比較。

$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

來源

2017-08-01 12:52:24 krutkowski86

想要在angularjs中動態禁用天數

回答

相關問題