Set min date to current date in angularJS input

Question

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

`function() { return new Date(); }` – Paulo Scardine Mar 16 '15 at 20:57 — Paulo Scardine, Mar 16 '15 at 20:57

victorkt · Answer 1 · 2015-03-16T21:41:20.673

31

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.

edited Mar 16 '15 at 21:41

answered Mar 16 '15 at 21:03

victorkt

13,992
9
52
51

I want to set it to current date. – Sam Mar 16 '15 at 21:05
It's working for me, updated my answer with an example. – victorkt Mar 16 '15 at 21:42
Yes it is correct. Just a question, how are you filling the form? Are you using the same ISO8601 format, eg: 2015-03-10 ? – victorkt Mar 16 '15 at 22:53
Though the data I am binding is in yyyy-MM-dd format, it is showing up in dd-MM-yyy format. – Sam Mar 16 '15 at 22:56
Maybe that's the problem, though I just tested it on Safari (which doesn't have support for date fields). Typing the date in dd-MM-yyy format works fine. On Chrome there is a date selector, and it displays the date as dd-MM-yyyy but the validation works fine too. – victorkt Mar 16 '15 at 23:03
It is behaving randomly for me. When I enter date like - 31-04-yyyy, it shows up the message. As soon as I decrease either 31 or 4, the message goes away. Not sure why it is picking up this date – Sam Mar 16 '15 at 23:11
Hi @Victorkohl, I have the same issue(see :http://stackoverflow.com/questions/36263602/angularjs-how-to-validate-date-format-dd-mm-yyyy-when-manual-enter ), but your link is not working. could you please update. Also good if you give me answer too. – Ajay2707 Apr 05 '16 at 06:34

Mark · Answer 2 · 2015-03-16T21:36:42.823

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

I am having a similar issue! Though my is on the selecting min and max. Shouldn't the max and min be still available for picking? I mean they are not greyed out, so they should be okay to select, but when selected an error is still thrown, this is kind of strange. Is it that it is a strict comparison to the min and max and thus selecting them cause an error, isn't there a way to avoid that ? — AKFourSeven, Oct 29 '15 at 14:15
I am having a similar issue. Followed the steps provided above it shows error when selecting back date. But still allows the record to be created on submit. Also isn't there a way in which the dates before today are inactive ie not available for selection? — Ashi, Mar 18 '16 at 04:57

score 2 · Answer 3 · answered Jan 31 '18 at 17:45

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

score 0 · Answer 4 · edited Apr 05 '17 at 13:06

0

just add in your controller

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

and in your html code add -

min-date="today"

edited Apr 05 '17 at 13:06

Tom

4,257
6
33
49

answered Apr 05 '17 at 12:35

yogesh mhetre

121
5

Esrar Mansuri · Answer 5 · 2017-11-03T10:32:19.080

0

 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>

edited Nov 03 '17 at 10:32

answered Nov 02 '17 at 11:09

Esrar Mansuri

1
3

1

Try to avoid comment in answer unless you have "specific detail" answer. Please use comment box below and Once you have sufficient reputation you will be able to comment on any post. :) – Rucha Bhatt Joshi Nov 02 '17 at 11:18
1

can you check my Answer Again – Esrar Mansuri Nov 03 '17 at 10:33
appreciate that :) – Rucha Bhatt Joshi Nov 03 '17 at 10:48

Set min date to current date in angularJS input

5 Answers5

Linked