CODEWITHSUNDEEP
angularjs
Sam
Sam

Reputation: 4484

Set min date to current date in angularJS input

In AngularJS, how can we set the min attribute of input type="date" to current date (today's) ?

<input type="date" ng-model="data.StartDate" name="StartDate" min=?? />

Edit1

I did what was suggested below and added this in controller - 

$scope.currentDate = new Date();

And this in Html - 

<input type="date" ng-model="data.StartDate" name="StartDate" required min="{{currentDate | date:'yyyy-MM-dd'}}" />
<span ng-show="form.StartDate.$dirty && form.StartDate.$invalid">
    <span ng-show="form.StartDate.$error.required">Start Date is required</span>
    <span ng-show="form.StartDate.$error.min">Start Date should not be less than current date</span>
</span>

Now, only the year is not allowing to be selected less than 2015. Also, if whole date is less than current date, then no validation is occuring. Required validation is working fine. Is .min correct way to check the field?

Thanks

Upvotes: 19

Views: 63689

Answers (5)

Thilanka Ishara Gunathilake
Thilanka Ishara Gunathilake

Reputation: 286

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

Upvotes: 2

Esrar Mansuri
Esrar Mansuri

Reputation: 1

 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>

Upvotes: 0

yogesh mhetre
yogesh mhetre

Reputation: 121

just add in your controller 

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

and in your html code add -

min-date="today"

Upvotes: 0

victorkt
victorkt

Reputation: 14572

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.

Upvotes: 31

Mark
Mark

Reputation: 356

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="[email protected]" 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

Upvotes: 2

Related Questions