<div class="container" ng-app="app" ng-controller="MainCtrl">
<header>
<div class="page-header">
<h2>バインディングに連動したフォームの検証<small>(日付)</small></h2>
</div>
</header>
<section>
<form name="form" class="form-horizontal">
<div class="form-group" ng-class="{'has-error':!form.date.$valid}">
<label for="diDate" class="col-sm-2 control-label">日付</label>
<div class="col-sm-10">
<!-- type="date"に注意。これはHTML5タグ。FFではいまいちなサポートだが動かないことはない。 https://docs.angularjs.org/api/ng/input/input%5Bdate%5D -->
<!-- ng-model="date"の初期値設定はapp.jsで行っている。 -->
<!-- minとmaxでvalidになる期間を指定。値の設定はapp.jsで行っている。 -->
<!-- 「| date:'yyyy-MM-dd'」はdateオブジェクトをyyy-MM-ddのフォーマットで出力するためのフィルタ指定。 https://docs.angularjs.org/api/ng/filter/date -->
<!-- requiredでnullチェックも同時に行っている。 -->
<input id="diDate" type="date" class="form-control" placeholder="yyyy-MM-dd(今日から1年後まで)" ng-model="date" name="date" required min="{{minDate | date:'yyyy-MM-dd'}}" max="{{maxDate | date:'yyyy-MM-dd'}}" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-primary btn-block" ng-disabled="!form.date.$valid">送信</button>
</div>
</div>
</form>
</section>
</div>
// appというAngularJSアプリケーションモジュールを作成
var app = angular.module('app', []);
// アプリケーションモジュールにMainCtrlというコントローラーを追加
app.controller('MainCtrl', function ($scope) {
//初期選択の日付を今日の日付に設定
$scope.date = new Date();
//期間の最小を今日の日付に設定
$scope.minDate = new Date();
//期間の最大を今日の日付から1年後に設定
var maxDate = new Date();
maxDate.setFullYear(maxDate.getFullYear() + 1);
$scope.maxDate = maxDate;
});
External resources loaded into this fiddle: