如何在日期选择器角度禁用过去的日期
Posted
技术标签:
【中文标题】如何在日期选择器角度禁用过去的日期【英文标题】：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=" <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) - 定义最小可用日期。
【讨论】：
以上是关于如何在日期选择器角度禁用过去的日期的主要内容，如果未能解决你的问题，请参考以下文章