Установите минимальную дату на текущую дату на угловом входе

В AngularJS, как мы можем установить атрибут min типа input type="date" на текущую дату (сегодня)?

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

Edit1

Я сделал то, что было предложено ниже, и добавил это в контроллер -

$scope.currentDate = new Date();

И это в 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>

Теперь только год не может быть выбран менее чем за 2015 год. Кроме того, если целая дата меньше текущей даты, то проверки не происходит. Требуемая проверка работает нормально. Правильно ли установлен .min проверки поля?.

благодаря

Ответы

Ответ 1

Да, вы можете установить минимальное значение. Согласно документам:

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

аргументы

min (необязательно) string - устанавливает минимальную ошибку проверки, если введенное значение меньше min. Это должно быть допустимая строка даты ISO (yyyy-MM-dd).

EDIT Чтобы установить поле на текущую дату:

контроллер:

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

Посмотреть:

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

Рабочий пример здесь.

Ответ 2

Согласно Угловым документам

min (необязательно) string Устанавливает ключ проверки минимальной проверки, если введенное значение меньше min. Это должно быть допустимая строка даты ISO (yyyy-MM-dd).

вы можете связать это с переменной области или непосредственно поместить выражение в атрибут, оно просто должно быть в правильном формате (объект date javascript имеет метод toISOString()). Следует также отметить, что это не мешает пользователю выбирать дату ниже минимума и вместо этого устанавливает ключ проверки, чтобы указать, что поле недействительно.

редактировать:

скрипт

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>

ваше сообщение об ошибке указывает, что вы хотите, чтобы дата не превышала текущую дату, если это так, просто измените

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

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

Рабочий пример

Ответ 3

просто добавьте в свой контроллер

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

и в вашем html-коде add -

min-date="today"

Ответ 4

 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>

Ответ 5

правильные ответы уже указаны выше, если кто-либо ищет решение в Angular 2/4/5 здесь, это способ,

в файле.ts

private todate = new Date();

в вашем html файле,

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

также здесь вы можете записывать другие параметры формата, доступные в Angular

форматы даты