Question

我想动态禁用（Sun，Mon）这样的日子。将从数据库中获取天数。我正在使用角度为js Ui-bootstrap的ui bootstrap。在我的数据库中，我只存储了几天（周日，周一）。那么我如何转换这些天并将其传递给ui bootstrap的日历，以便那些日子将被禁用。我的控制器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

我不确定我是否清楚地理解你的问题，但我会采取行动。如果您尝试在日历上禁用特定日期，请尝试使用＆＃34; dateDisabled＆＃34; 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

想要在angularjs中动态禁用天数

2 个答案: