120 lines
4.5 KiB
HTML
120 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Daterange picker example</title>
|
|
|
|
<!-- bower:css -->
|
|
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css" />
|
|
<link rel="stylesheet" href="lib/bootstrap-daterangepicker/daterangepicker-bs3.css" />
|
|
<!-- endbower -->
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<!-- bower:js -->
|
|
<script src="lib/jquery/dist/jquery.js"></script>
|
|
<script src="lib/angular/angular.js"></script>
|
|
<script src="lib/bootstrap/dist/js/bootstrap.js"></script>
|
|
<script src="lib/moment/moment.js"></script>
|
|
<script src="lib/bootstrap-daterangepicker/daterangepicker.js"></script>
|
|
<!-- endbower -->
|
|
|
|
<script src="js/angular-daterangepicker.js"></script>
|
|
|
|
<div class="container">
|
|
<h1>Daterange picker example</h1>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6" ng-controller="TestCtrl">
|
|
<form class="form-horizontal">
|
|
<div class="form-group">
|
|
<label for="daterange1" class="control-label">Simple picker</label>
|
|
<input date-range-picker id="daterange1" class="form-control date-picker" type="text"
|
|
name="date" ng-model="date" required/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="daterange2" class="control-label">Picker with min and max date</label>
|
|
<input date-range-picker id="daterange2" class="form-control date-picker" type="text"
|
|
min="'2014-02-23'" max="'2015-02-25'" name="date" ng-model="date"
|
|
required/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="daterange3" class="control-label">Picker with custom locale</label>
|
|
<input date-range-picker id="daterange3" class="form-control date-picker" type="text"
|
|
name="date" ng-model="date" options="opts" required/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="daterange4" class="control-label">Clearable picker</label>
|
|
<input date-range-picker id="daterange4" class="form-control date-picker" type="text"
|
|
name="date" ng-model="date" clearable="true" required/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="daterange5" class="control-label">Picker with custom format</label>
|
|
<div class="input-group col-md-6" id="daterange5">
|
|
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
|
|
<input date-range-picker class="form-control date-picker" type="text"
|
|
name="date2" ng-model="date2" options="{format: 'MMMM D, YYYY'}" required/>
|
|
<span class="input-group-addon"><span class="glyphicon glyphicon-chevron-down"></span></span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="row">
|
|
<h4>Dates:</h4>
|
|
<div class="col-md-12 well">
|
|
{{date}}<br>
|
|
{{date2}}<br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
|
|
<script>
|
|
exampleApp = angular.module('example', ['daterangepicker']);
|
|
exampleApp.controller('TestCtrl', function($scope, $interval) {
|
|
$scope.date = {
|
|
startDate: moment().subtract("days", 1),
|
|
endDate: moment()
|
|
};
|
|
$scope.date2 = {
|
|
startDate: moment().subtract("days", 1),
|
|
endDate: moment()
|
|
};
|
|
|
|
$scope.opts = {
|
|
locale: {
|
|
applyClass: 'btn-green',
|
|
applyLabel: "Použít",
|
|
fromLabel: "Od",
|
|
toLabel: "Do",
|
|
cancelLabel: 'Zrušit',
|
|
customRangeLabel: 'Vlastní rozsah',
|
|
daysOfWeek: ['Ne', 'Po', 'Út', 'St', 'Čt', 'Pá', 'So'],
|
|
firstDay: 1,
|
|
monthNames: ['Leden', 'Únor', 'Březen', 'Duben', 'Květen', 'Červen', 'Červenec', 'Srpen', 'Září',
|
|
'Říjen', 'Listopad', 'Prosinec'
|
|
]
|
|
|
|
},
|
|
ranges: {
|
|
'Last 7 Days': [moment().subtract('days', 6), moment()],
|
|
'Last 30 Days': [moment().subtract('days', 29), moment()]
|
|
}
|
|
};
|
|
|
|
//Watch for date changes
|
|
$scope.$watch('date', function(newDate) {
|
|
console.log('New date set: ', newDate);
|
|
}, false);
|
|
|
|
});
|
|
|
|
angular.bootstrap(document, ['example']);</script>
|
|
|
|
</html>
|