Menu
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
617
now() | date:'yyyy-MM-dd'}}</span> should display the current date.
The min attribute specifies the minimum value (date) for a date field. Tip: Use the min attribute together with the max attribute to create a range of legal values. Tip: To set or return the value of the max attribute, use the max property.
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.
114
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
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
