禁用日期选择器中过去的日期

Question

我有以下代码片段，其中包含日期选择器控件。

<input type="text" name="startDate" class="form-control  input-sm" datepicker-popup="dd-MMMM-yyyy" ng-model="startDate" required />

我需要在日期选择器控件中禁用过去的日期，以下是我配置的内容，但它并没有起作用。我遗漏了什么吗？

App.config(['datepickerConfig', 'datepickerPopupConfig', function (datepickerConfig, datepickerPopupConfig) {
    datepickerConfig.startingDay = 1;
    datepickerConfig.showWeeks = true;

    datepickerPopupConfig.datepickerPopup = "dd-MMMM-yyyy";
    datepickerPopupConfig.currentText = "Now";
    datepickerPopupConfig.clearText = "Erase";
    datepickerPopupConfig.closeText = "Close";
}]);

- Parashuram

---

我在代码中没有看到任何指示日期选择器禁用过去日期的内容。你为什么认为应该禁用过去日期？请阅读http://angular-ui.github.io/bootstrap/versioned-docs/0.13.4/#/datepicker，并使用**适当的**选项。 - JB Nizet

Answer 1

如果你想缩小可能日期的范围，请添加min-date或max-date，就像示例中那样。

这是相关文档部分：

• max-date（默认值：null）- 定义可用的最大日期。
• min-date（默认值：null）- 定义可用的最小日期。

- miensol

Answer 2

自从angular ui-bootstrap 1.1.0版本以后，你需要使用一个名为datepicker-options的属性来配置日期选择器：

<input type="text" class="form-control" datepicker-options="dateOptions" datepicker-popup="dd-MMMM-yyyy" is-open="popup.opened"/>
<span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="open()">
        <i class="glyphicon glyphicon-calendar"></i>
    </button>
</span>

现在，您只需要将minDate属性设置为当前日期或任何您喜欢的日期，以成为datepicker的最小日期。您应该在控制器或服务中编写datepicker配置，而不是在应用程序的.config块中编写：

$scope.dateOptions = {
   minDate: new Date() 
};

$scope.popup = {
   opened: false
};

$scope.open = function() {
   $scope.popup.opened = true;
};

更多信息请阅读官方文档。

- The_Dude