forked from fragaria/angular-daterangepicker
-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.html
137 lines (120 loc) · 5.43 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!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.css" />
<!-- endbower -->
</head>
<body>
<!-- bower:js -->
<script src="lib/jquery/dist/jquery.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-messages/angular-messages.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 name="dateForm" class="form-horizontal">
<div class="form-group">
<label for="daterange1" class="control-label">Simple picker</label>
<input date-range-picker id="daterange1" name="daterange1" class="form-control date-picker" type="text"
ng-model="date" required/>
</div>
<div class="form-group" ng-class="{'has-error': dateForm.daterange2.$invalid}">
<label for="daterange2" class="control-label">Picker with min and max date</label>
<input date-range-picker id="daterange2" name="daterange2" class="form-control date-picker" type="text"
min="'2015-01-23'" max="'2015-08-25'" ng-model="date"
required/>
<div class="help-block" ng-messages="dateForm.daterange2.$error">
<p ng-message="min">Start date is too far in the past.</p>
<p ng-message="max">End date is too far in the future.</p>
<p ng-message="required">Range is required.</p>
</div>
</div>
<div class="form-group">
<label for="daterange3" class="control-label">Picker with custom locale</label>
<input date-range-picker id="daterange3" name="daterange3" class="form-control date-picker" type="text"
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" name="daterange4" class="form-control date-picker" type="text"
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 name="daterange5" class="form-control date-picker" type="text"
ng-model="date2" options="{locale: {format: 'MMMM D, YYYY'}}" required/>
<span class="input-group-addon"><span class="glyphicon glyphicon-chevron-down"></span></span>
</div>
</div>
<button type="button" class="btn" ng-click="setStartDate()">Set Start Date</button>
<button type="button" class="btn" ng-click="setRange()">Set Range</button>
</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', ['ngMessages', 'daterangepicker']);
exampleApp.controller('TestCtrl', function($scope) {
$scope.date = {
startDate: moment().subtract(1, "days"),
endDate: moment()
};
$scope.date2 = {
startDate: moment().subtract(1, "days"),
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(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()]
}
};
$scope.setStartDate = function () {
$scope.date.startDate = moment().subtract(4, "days");
};
$scope.setRange = function () {
$scope.date = {
startDate: moment().subtract(5, "days"),
endDate: moment()
};
};
//Watch for date changes
$scope.$watch('date', function(newDate) {
console.log('New date set: ', newDate);
}, false);
});
angular.bootstrap(document, ['example']);</script>
</html>