Bootstrap 如何禁用过去的日期在日期选择器Angular

5ssjco0h 于 2023-03-10 发布在 Bootstrap

关注(0)|答案(4)|浏览(157)

我有一个输入字段与datepicker。我需要用户选择日期只从现在的日期和过去的日期不应点击。下面是代码。

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

感谢快速帮助..谢谢！

twitter-bootstrap

来源：https://stackoverflow.com/questions/40801743/how-to-disable-the-past-date-in-datepicker-angular

4条答案

按热度按时间

q43xntqr1#

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

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

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

赞(0）回复(0）举报 2023-03-10

jchrr9hc2#

代码：

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

工作人员为：

赞(0）回复(0）举报 2023-03-10

p8h8hvxi3#

如果要缩小可能日期的范围，请添加min-date或max-date，如示例所示。http://plnkr.co/edit/QiQDiPXhuO0eTPxxdGnd?p=preview
以下是文档的相关部分：

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

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

赞(0）回复(0）举报 2023-03-10

ikfrs5lh4#

您可以使用HTML和TypeScript的组合，在Angular中禁用datetime-local类型的HTML5输入中的过去日期。

组件.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输入仅允许用户选择从当前日期开始的未来日期和时间。
我希望这对任何新访问者都有帮助。

赞(0）回复(0）举报 2023-03-10

我来回答

Bootstrap 如何禁用过去的日期在日期选择器Angular

4条答案

代码：

工作人员为：

相关问题

热门标签

最新问答