JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.6.0/moment-with-langs.min.js"></script>
<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">
            <!-- HTML5バージョン -->
            <div class="form-group" ng-class="{'has-error':!form.date.$valid}">
                <label for="diDate1" class="col-sm-4 control-label">日付（HTML5）</label>
                <div class="col-sm-4">
                    <!-- 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="diDate1" type="date" class="form-control" placeholder="yyyy-MM-dd（今日から１年後まで）" ng-model="date" name="date" required min="{{minDate | date:'yyyy-MM-dd'}}" max="{{maxDate | date:'yyyy-MM-dd'}}" />
                </div>
            </div>
            <!-- datetimepickerバージョン -->
            <div class="form-group" ng-class="{'has-error':!form.date.$valid}">
                <label for="diDate2" class="col-sm-4 control-label">日付（datetimepicker）</label>
                <div class="col-sm-4">
                 ...

CSS

/**
 * @license angular-bootstrap-datetimepicker  v0.2.2
 * (c) 2013 Knight Rider Consulting, Inc. http://www.knightrider.com
 * License: MIT
 */
 .datetimepicker {
    padding:4px;
    margin-top:1px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    direction:ltr
}
.datetimepicker-inline {
    width:220px
}
.datetimepicker.datetimepicker-rtl {
    direction:rtl
}
.datetimepicker.datetimepicker-rtl table tr td span {
    float:right
}
.datetimepicker-dropdown, .datetimepicker-dropdown-left {
    top:0;
    left:0
}
[class*=" datetimepicker-dropdown"]:before {
    content:'';
    display:inline-block;
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-bottom:7px solid #ccc;
    border-bottom-color:rgba(0, 0, 0, 0.2);
    position:absolute
}
[class*=" datetimepicker-dropdown"]:after {
    content:'';
    display:inline-block;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-bottom:6px solid #fff;
    position:absolute
}
[class*=" datetimepicker-dropdown-top"]:before {
    content:'';
    display:inline-block;
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-top:7px solid #ccc;
    border-top-color:rgba(0, 0, 0, 0.2);
    border-bottom:0
}
[class*=" datetimepicker-dropdown-top"]:after {
    content:'';
    display:inline-block;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-top:6px solid #fff;
    border-bottom:0
}
.datetimepicker-dropdown-bottom-left:before {
    top:-7px;
    right:6px
}
.datetimepicker-dropdown-bottom-left:after {
    top:-6px;
    right:7px
}
.datetimepicker-dropdown-bottom-right:before {
    top:-7px;
    left:6px
}
.datetimepicker-dropdown-bottom-right:after {
    top:-6px;
    left:7px
}
.datetimepicker-dropdown-top-left:before {
    bottom:-7px;
    right:6px
}
.datetimepicker-dropdown-top-left:after {
    bottom:-6px;
   ...

JavaScript

// appというAngularJSアプリケーションモジュールを作成
// datetimepickerモジュールを組み込み
var app = angular.module('app', ['ui.bootstrap.datetimepicker']);

// アプリケーションモジュールにMainCtrlというコントローラーを追加
app.controller('MainCtrl', function ($scope) {

    //初期選択の日付を今日の日付に設定
    $scope.date = new Date();

    //期間の最小を今日の日付に設定
    $scope.minDate = new Date();

    //期間の最大を今日の日付から１年後に設定
    var maxDate = new Date();
    maxDate.setFullYear(maxDate.getFullYear() + 1);
    $scope.maxDate = maxDate;

    //日付ピッカー選択時に呼ばれる
    $scope.onTimeSet = function (newDate, oldDate) {
        console.log(newDate);
        console.log(oldDate);
    }

    //カレンダーの表示を日本語にする
    moment.lang('ja');

});


/**
 * @license angular-bootstrap-datetimepicker  v0.2.2
 * (c) 2013 Knight Rider Consulting, Inc. http://www.knightrider.com
 * License: MIT
 * @author        Dale "Ducky" Lotts
 * @since        2013-Jul-8
 */
angular.module('ui.bootstrap.datetimepicker', []).constant('dateTimePickerConfig', {
    dropdownSelector: null,
    minuteStep: 5,
    minView: 'minute',
    startView: 'day',
    weekStart: 0
}).constant('dateTimePickerConfigValidation', function (configuration) {
    "use strict";
    var validOptions = ['startView', 'minView', 'minuteStep', 'dropdownSelector', 'weekStart'];
    for (var prop in configuration) {
        if (configuration.hasOwnProperty(prop)) {
            if (validOptions.indexOf(prop) < 0) {
                throw ("invalid option: " + prop);
            }
        }
    }
    var validViews = ['minute', 'hour', 'day', 'month', 'year'];
    if (validViews.indexOf(configuration.startView) < 0) {
        throw ("invalid startView value: " + configuration.startView);
    }
    if (validViews.indexOf(configuration.minView) < 0) {
        throw ("invalid minView value: " + configuration.minView);
    }
    if (validViews.indexOf(configuration.minView) > validViews.indexOf(configuration.startView)) {
        throw ("startView must be greater than minView");
    }
    if...