发表新帖
发表新帖

Set min date to current date in angularJS input

前端 未结
关注
5 775
梦如初夏
梦如初夏 2020-12-30 02:59

In AngularJS, how can we set the min attribute of input type=\"date\" to current date (today\'s) ?
相关标签:
5条回答
  • 遥遥无期
    2020-12-30 03:27

    According to the Angular docs

    min (optional) string Sets the min validation error key if the value entered is less than min. This must be a valid ISO date string (yyyy-MM-dd).

    you can bind that to a scope variable or directly put the expression in the attribute, it just needs to be in the correct format (javascript date object has a toISOString() method). It should also be noted this does not prevent the user from picking a date below the minimum and instead sets the validation key to indicate the field is not valid.

    edit:

    Script

    var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  var today=new Date();
  $scope.today = today.toISOString();
});

    Html

    <!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <form name="myForm">
    <input type="date" ng-model="StartDate" name="StartDate" required min="{{today}}" />
    <span ng-show="myForm.StartDate.$dirty && myForm.StartDate.$invalid">
    <span ng-show="myForm.StartDate.$error.required">Start Date is required</span>
    <span ng-show="myForm.StartDate.$error.min">Start Date should not be less than current date</span>

</span>
</form>
  </body>

</html>

    your error message indicates you want the date to be no greater than the current date, if that is the case simply change 

      <input type="date" ng-model="StartDate" name="StartDate" required min="{{today}}" />

    to

      <input type="date" ng-model="StartDate" name="StartDate" required max="{{today}}" />

    Working Example

    0 讨论(0)
  • 被撕碎了的回忆
    2020-12-30 03:31

    just add in your controller 

    $scope.today=new Date() // calculates current date

    and in your html code add -

    min-date="today"
    0 讨论(0)
  • 一个人的身影
    2020-12-30 03:41

    Yes you can set a minimum value. According to docs:

    <input type="date"
       ng-model=""
       [name=""]
       [min=""]
       [max=""]
       [required=""]
       [ng-required=""]
       [ng-change=""]>

    Arguments

    min (optional) string - Sets the min validation error key if the value entered is less than min. This must be a valid ISO date string (yyyy-MM-dd).

    EDIT To set the field to current date:

    controller:

    function Ctrl($scope)
{
    $scope.date = new Date();
}

    view:

    <input type="date" ng-model="data.StartDate" 
        name="StartDate" min="{{date | date:'yyyy-MM-dd'}}" />

    Working example here.

    0 讨论(0)
  • 执笔经年
    2020-12-30 03:42

    correct answers are already in above, if anyone looking for a solution in Angular 2/4/5 here is a way,

    in you .ts file 

    private todate = new Date();

    in your html file,

     <input type="date" min="{{todate | date:'yyyy-MM-dd'}}" class="form-control" [(ngModel)]="datemodel" id="input-12">

    also here you can file other format options available in Angular

    date formats

    0 讨论(0)
  • 闹比i
    2020-12-30 03:42 

     var today = new Date().toISOString().split('T')[0];
        document.getElementsByName("appo_date")[0].setAttribute('min', today);
      <input type="date"  name="appo_date" id="appo_date" ng-model="appoint_data.appo_date"  
          ng-required="true" close-text="Close" uib-datepicker-popup="dd-MMMM-yyyy"  required>

    0 讨论(0)
 看不清?
提交回复
热议问题