ms.datepicker-popup-multi-select
Version:
53 lines (48 loc) • 1.68 kB
HTML
<html lang="en" id="ng-app" ng-app="app">
<head>
<meta charset="utf-8">
<title>datepickerPopupMultiSelect Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<!-- App files -->
<script src="../src//ms.datepickerPopupMultiSelect.js"></script>
<script src="app.js"></script>
<style>
body {
padding: 10px;
}
td {
vertical-align: top
}
</style>
</head>
<body ng-controller='AppCtrl as app'>
<div>
<h3>Multiple</h3>
Selected Dates:
{{ app.activeDate }}
<div class='well well-sm'>
<span ng-repeat='d in app.selectedDates | orderBy: d'>
<span ng-if="$index > 0"> / </span>
{{d | date : 'yyyy-MM-dd'}}
</span>
</div>
<input type="text" class="form-control" uib-datepicker-popup="yyyy-MM-dd"
ng-model="app.activeDate" is-open="app.isOpen"
ng-focus="app.open()"
ng-click="app.open()" close-on-date-selection="false" multi-select="app.selectedDates"/>
</div>
<hr/>
<div>
<h3>Single</h3>
Selected Dates:
{{ app.activeDate2 }}
<input type="text" class="form-control" uib-datepicker-popup="yyyy-MM-dd"
ng-model="app.activeDate2" is-open="app.isOpen2"
ng-focus="app.open2()"
ng-click="app.open2()" close-on-date-selection="true"/>
</div>
</body>
</html>