JSFiddle - React, Tailwind, and code Playground

by Florian Ferbach

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://rawgithub.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-0.11.0.js"></script>
<div ng-app="App">
    <div ng-controller="Ctrl"> <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
         <h4>Popup</h4>

        <div class="row">
            <div class="col-md-6">
                <p class="input-group">
                    <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" /> <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>

                </p>
            </div>
        </div>
    </div>
</div>

JavaScript

var App, Ctrl
App = angular.module('App', ['ui.bootstrap']);
Ctrl = function ($scope) {
    $scope.dt = new Date();
    
    $scope.open = function ($event) {
        $event.preventDefault();
        $event.stopPropagation();

        $scope.opened = true;
    };

    $scope.dateOptions = {
        formatYear: 'yy',
        startingDay: 1,
        min-date: new Date(2014,6,2),
        max-date: new Date(2014,6,10)
    };
    $scope.format = 'dd-MMMM-yyyy';
};
angular.module('App').controller('Ctrl', Ctrl);