如何禁用日期选择器角度中的过去日期

Question

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

<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>

感谢快速帮助.. 谢谢！

Answer 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');

Answer 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>

工作为：

Answer 3

如果您想缩小可能日期的范围，请添加最小日期或最大日期，如示例中所示。

http://plnkr.co/edit/QiQDiPXhuO0eTPxxdGnd?p=preview

以下是文档的相关部分：

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

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

Answer 4

您可以通过结合使用 HTML 和 TypeScript 来禁用 Angular 中 datetime-local 类型的 HTML 5 输入中的过去日期。

组件.html

<input type="datetime-local" min="{{dateToday() | date:'yyyy-MM-ddTHH:mm:ss.sss'}}" />

我们使用 min 属性将允许的最小日期设置为当前日期和时间。

minDate()

函数以与

datetime-local

输入类型兼容的格式返回当前日期和时间。您可以修改它以满足您的需求。

组件.ts

dateToday(): Date {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth() + 1;
  const day = now.getDate();
  const hour = now.getHours();
  const minute = now.getMinutes();
  return new Date(year, month, day, hour, minute);
}

此函数返回一个

Date

对象，表示当前日期和时间，但秒和毫秒设置为零。这可确保最小日期是当前分钟的开始，而不是用户加载页面的确切时刻。

datetime-local

输入仅允许用户选择从当天开始的未来日期和时间。

我希望这对这篇文章的新访客有所帮助。

Answer 5

在你的 ts 文件中添加 minDate = 新日期(); 在角度 16

并导入MatInputModule

在 html 中只需在输入中添加 [min]="minDate"

 <div class="tagus-form-group without-icon">
                <mat-form-field appearance="fill">
                    <mat-label>End date</mat-label>
                    <input [min]="minDate" matInput [matDatepicker]="endDatePicker" formControlName="endDate" />
                    <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
                    <mat-datepicker #endDatePicker></mat-datepicker>
                </mat-form-field>
            </div>

如何禁用日期选择器角度中的过去日期

问题描述投票：0回答：5

5个回答

代码：

工作为：

最新问题

如何禁用日期选择器角度中的过去日期

问题描述 投票：0回答：5

5个回答

代码：

工作为：

最新问题

问题描述投票：0回答：5