-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
64 lines (59 loc) · 2.55 KB
/
index.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
<!DOCTYPE html>
<html ng-app="ExampleApp">
<head>
<title>Datetime range input UI element for AngularJS</title>
<link rel="stylesheet" type="text/css" href="dist/datetime-range.min.css">
<meta name="viewport" content="width=500,user-scalable=0">
<style>
body {
box-sizing: border-box;
width: 500px;
height: 100vh;
min-height: 100vh;
margin: 0;
padding: 15px;
}
input {
width: 100%;
}
</style>
</head>
<body ng-controller="MainCtrl">
<label for="timezoneSelect">Timezone select: </label>
<select ng-model="timezone" name="timezoneSelect" ng-options="timezone for timezone in timezones"></select>
<hr>
<datetime-range ng-model="range" timezone="timezone" limits-range="limits" on-change="changed()" on-change-start="changedStart()" on-change-end="changedEnd()" on-close="closed()"></datetime-range>
<hr>
<time-range ng-model="timerange" limits-range="timelimits" on-change="changed()" on-change-start="changedStart()" on-change-end="changedEnd()" on-close="closed()"></time-range>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone-with-data.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-range/3.0.3/moment-range.js" charset="utf-8"></script>
<script src="dist/datetime-range.min.js"></script>
<script>
angular.module('ExampleApp', ['senzil.datetime-range']).
controller('MainCtrl', function ($scope) {
$scope.timezones = moment.tz.names();
$scope.timezone = moment.tz.guess();
$scope.range= null;
$scope.limits = moment.range(moment.tz(), moment.tz().add(1, 'h'));
$scope.timerange = null;
$scope.timelimits = moment.range(moment.tz().add(-1, 'h'), moment.tz().add(1, 'h'));
$scope.changed = function () {
console.log('changed start or end datetime objects');
console.log('datetime range', $scope.range);
console.log('time range', $scope.timerange);
};
$scope.changedStart = function () {
console.log('changed start datetime object');
};
$scope.changedEnd = function () {
console.log('changed end datetime object');
};
$scope.closed = function () {
console.log('edit popover closed');
};
});
</script>
</body>
</html>