使用Bootstrap datepicker禁用日期

时间:2016-06-15 16:11:43

标签: angularjs datepicker angular-bootstrap

我正在尝试使用datepicker控件禁用某些日期(最终通过我提供的数组)。但是,似乎没有任何有用的内容传递给dateDisabled函数。当我在开发人员工具中设置断点时,第一个变量(在文档示例中设置为data)只是数字零。

我已验证该选项本身有效,因为空白返回true会禁用所有日期。我该怎样做才能获得有效的投入?

注意:我刚刚发现我们使用的是angular-ui-bootstrap版本0.12.1。

JS

    //options object for the datepicker control
    $scope.dateOptions = {
        dateDisabled: disableDates,
        formatYear: "yyyy"
    };

    // Disable weekend selection
    function disableDates(date, mode) {
        //return mode === 'day' && (date.getDay() === 5 || date.getDay() === 6);
        //return true;
        return date === new Date(2016, 6, 18);
    }

    //Set the calendar open
    $scope.openCalendar = function (e) {
        e.preventDefault();
        e.stopPropagation();
        $scope.vm.is_cal_open = !$scope.vm.is_cal_open;
    };

    $scope.hasInvalidErrorDate = function (date) {
        if (!date || date <= Date.parse("1/1/1900")) {
            return true;
        }

        return false;
    };

    $scope.earliestErrorDate = Date.parse("1/1/1900");

HTML

<div class="col-sm-4">
    <!-- Error Date -->
    <div class="form-group" ng-class="{'has-error': hasInvalidErrorDate(vm.data.adjustment.error_date) && form.$dirty}">
        <label for="error_date">Error Date</label>
        <p class="input-group calendar-wrapper">
            <!--input disabled the input so that it forces users to use the date picker and therfore ensure good input-->
            <input type="text" datepicker-popup="MM/dd/yyyy"
                   title="Click the calendar button"
                   name="error_date"
                   datepicker-options="dateOptions"
                   class="form-control"
                   is-open="vm.is_cal_open"
                   width="5"
                   ng-disabled="true"
                   ng-model="vm.data.adjustment.error_date"
                   min-date="dateOptions.minDate" />
            <span class="input-group-btn">
                <button type="button" class="btn btn-default delegate-cal-btn" ng-click="openCalendar($event)"><i class="fa fa-calendar"></i></button>
            </span>
        </p>
        <span class="text-danger small" ng-show="hasInvalidErrorDate(vm.data.adjustment.error_date) && form.$dirty">
            Please select an error date
        </span>
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

工作得非常好。

Ctrl + C