如何在日期选择器角度禁用过去的日期答案

【问题标题】：How to disable the past date in datepicker angular如何在日期选择器角度禁用过去的日期
【发布时间】：2017-04-09 15:54:57
【问题描述】：

我有一个带日期选择器的输入字段。我需要用户仅从当前日期中选择日期，过去的日期不应该是可点击的。下面是代码。

<div class="col-lg-4">
 <input  class="form-control" type="datetime" date-time auto-close="true" view="date" 
  min-view="date" maxlength="10" format="dd/MM/yyyy" ng-model="$ctrl.DateInput" 
  placeholder="renewal date" required="true">
</div>

感谢您的快速帮助.. 谢谢！

【问题讨论】：

我不知道你用的是什么日期选择器，但是有最小日期选项吗？
看起来您正在使用 HTML5 datetime use min="" 但请参阅浏览器支持caniuse.com/#feat=input-datetime
查看此演示链接plnkr.co/edit/W5pb1boMLOHZFnWkMU8o?p=preview
尝试设置 min="your min date value"
stackoverflow.com/questions/34693771/…

标签： javascript html angularjs twitter-bootstrap meteor

【解决方案1】：

   <input class="form-control m-input pl-6" type="date" 
   [min]="todayDate"formControlName="dateValidity">

最小值和最大值是用于验证输入范围的日期属性，这些属性将在日历弹出窗口的日期之前和之后禁用。

在你的 ts 中定义最小日期

     todayDate=this.datePipe.transform(new Date(), 'yyyy-MM-dd');

【讨论】：

【解决方案2】：

代码：

<html>
<head>    
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
    <script language="javascript" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
</head>
<body style="Padding:20px;">
    <form>
    
    <div ng-app="myApp" ng-controller="myCntrl">
    Date: 
        <input type="text" uib-datepicker-popup="{{dateformat}}" min-date="mindate" ng-model="dt" is-open="showdp" />
        <span>
            <button type="button" class="btn btn-default" ng-click="showcalendar($event)">
                <i class="glyphicon glyphicon-calendar"></i>
            </button>
        </span>
    </div>
    <script language="javascript">
        angular.module('myApp', ['ngAnimate', 'ui.bootstrap']);
        angular.module('myApp').controller('myCntrl', function ($scope) {
            $scope.today = function () {
                $scope.dt = new Date();
            };
            $scope.mindate = new Date();
            $scope.dateformat="MM/dd/yyyy";
            $scope.today();
            $scope.showcalendar = function ($event) {
                $scope.showdp = true;
            };
            $scope.showdp = false;
        });
    </script>
    </form>
</body>
</html>

工作：

【讨论】：

【解决方案3】：

如果您想缩小可能日期的范围，请添加 min-date 或 max-date，就像在示例中一样。 http://plnkr.co/edit/QiQDiPXhuO0eTPxxdGnd?p=preview

这是文档的相关部分：

https://angular-ui.github.io/bootstrap/#/datepicker

max-date (默认: null) - 定义最大可用日期。 min-date (默认: null) - 定义最小可用日期。

【讨论】：