在 datepicker-popup 中禁用过去的日期 [英] Disable past dates in datepicker-popup

查看:29
本文介绍了在 datepicker-popup 中禁用过去的日期的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有以下代码片段,其中有日期选择器控件.

I have below code snippet in which datepicker control is there.

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

在这里,我必须在 datepicker 控件中禁用过去的日期,下面是我已配置但不起作用的内容.我在这里遗漏了什么吗?

Here, i have to disable the past dates in the datepicker control and below is what i have configured but its not working. Am I missing something here?

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";
}]);

推荐答案

从 angular ui-bootstrap 版本 1.1.0 开始,您需要使用名为 datepicker-options 的属性来配置日期选择器:

Since angular ui-bootstrap version 1.1.0 you need to use an attribute called datepicker-options to configure a datepicker:

<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 属性设置为当前日期或您希望作为日期选择器的最小日期的任何其他日期.与其在应用程序的 .config 块中编写日期选择器配置,不如将其编写在控制器或服务中:

Now you only need to set the minDate property to the current date or any other date you like to be the minimum Date of the datepicker. Instead of writing the datepicker configuration in the .config block of your application, you should write it in a controller or a service:

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

$scope.popup = {
   opened: false
};

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

更多信息,请阅读官方文档.

这篇关于在 datepicker-popup 中禁用过去的日期的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆