angularjs - 강의 - plunker



angularJS 입력에서 최소 날짜를 현재 날짜로 설정하십시오. (4)

AngularJS에서는 input type="date"min 속성을 현재 날짜 (오늘)로 어떻게 설정할 수 있습니까?

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

편집 1

나는 아래에 제안되었던 것을했고 컨트롤러에 이것을 추가했다.

$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 필드를 확인하는 올바른 방법은 무엇입니까?

감사


Answer #1

각도 문서에 따르면

min (선택 사항) string 입력 된 값이 min보다 작 으면 min 유효성 검증 오류 키를 설정합니다. 유효한 ISO 날짜 문자열 (yyyy-MM-dd)이어야합니다.

그 변수를 범위 변수에 바인딩하거나 직접 표현식을 특성에 넣을 수 있습니다. 올바른 형식이어야합니다 (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}}" />

실례


Answer #2

그냥 컨트롤러에 추가하십시오.

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

그리고 귀하의 HTML 코드에 추가 -

min-date="today"

Answer #3

정답은 이미 위에 있습니다. 각도 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

날짜 형식


Answer #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> 





angularjs