-
Notifications
You must be signed in to change notification settings - Fork 28
/
Copy pathdemo.html
175 lines (157 loc) · 7.2 KB
/
demo.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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!doctype html>
<html lang="tw" ng-app="App">
<head>
<meta charset="UTF-8">
<title>Angular Datetime</title>
<script src="https://code.angularjs.org/1.2.30/angular.js"></script>
<!--[if lte ie 8]>
<script src="https://rawgit.com/scottjehl/Respond/master/dest/respond.src.js"></script>
<![endif]-->
<script src="https://unpkg.com/babel-polyfill@6.23.0/dist/polyfill.js"></script>
<script src="../dist/datetime.js"></script>
<link rel="stylesheet" href="https://rawgit.com/eight04/end2end/master/dist/end2end.css">
<script>
angular.module("App", ["datetime"]).controller("myDate", function($scope, datetime, $locale){
$scope.data = {
myDate: new Date,
myDateString: "2000-01-01 00:00:00",
myDateString2: "2000-01-01T00:00:00+08:00",
myTimezone: "+0000",
min: new Date(2010, 0, 1),
max: new Date(2019, 11, 31)
};
$scope.formats = function(formats){
var swap = [], format, code;
for (format in formats) {
code = format.charCodeAt(0)
if (97 <= code && code <= 122) {
swap.push(format);
}
}
return swap;
}($locale.DATETIME_FORMATS);
$scope.reset = function(){
$scope.data.myDate = new Date;
$scope.data.myDateString = "2000-01-01 00:00:00";
};
$scope.clear = function(){
$scope.data.myDate = null;
$scope.data.myDateString = null;
};
});
</script>
</head>
<body class="container-sm" ng-controller="myDate">
<h2>Angular Datetime <small>Demo Page</small></h2>
<p>To use the directive, add <code>datetime="date-format"</code> attribute to your input.</p>
<input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="data.myDate" class="form-control">
<pre>myDate = {{data.myDate | json}}</pre>
<pre class="code"><code><input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="myDate"></code></pre>
<p>To set a date, just set your model to a Date object. Set to null to remove it.</p>
<p>
<button class="btn-default" ng-click="reset()">Reset</button>
<button class="btn-default" ng-click="clear()">Clear</button>
</p>
<pre class="code"><code><button ng-click="myDate = new Date">reset</button></code></pre>
<h3>min / max</h3>
<p>Validation for min/max date. The min/max attribute will be used to construct the date object.</p>
<form name="minmaxForm">
<input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="data.myDate" class="form-control" min="{{data.min.toUTCString()}}" max="{{data.max.toUTCString()}}" name="input">
</form>
<pre>input.$error = {{minmaxForm.input.$error | json}}</pre>
<pre class="code" ng-non-bindable><code><input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="myDate" min="Jan 1, 2010" max="Dec 31, 2019"></code></pre>
<div class="form-group">
<label>
Min
<input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="data.min" class="form-control">
</label>
</div>
<div class="form-group">
<label>
Max
<input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="data.max" class="form-control">
</label>
</div>
<h3>required</h3>
<p><code>ng-invalid-required</code> will be added to the class list when all parts are empty.</p>
<form name="requireForm">
<input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="data.myDate" class="form-control" required name="input">
</form>
<pre>input.$error = {{requireForm.input.$error | json}}</pre>
<pre class="code"><code><input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="myDate" required></code></pre>
<p>Use <code>ng-require</code>.</p>
<form name="ngRequireForm">
<label class="checkbox"><input type="checkbox" ng-model="isRequired">Required</label>
<input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-required="isRequired" class="form-control" ng-model="data.myDate" name="input">
</form>
<pre>input.$error = {{ngRequireForm.input.$error | json}}</pre>
<h3>model-format</h3>
<p>With this attribute, it will convert the model into a date string automatically.</p>
<input type="text" class="form-control" datetime="medium" ng-model="data.myDateString" datetime-model="yyyy-MM-dd HH:mm:ss">
<pre class="output">myDateString = {{data.myDateString | json}}</pre>
<pre class="code"><code><input type="text" datetime="medium" datetime-model="yyyy-MM-dd HH:mm:ss" ng-model="myDateString"></code></pre>
<h3>datetime-timezone</h3>
<p>By the default, angular-datetime will format the date in the local timezone. Use <code>datetime-timezone</code> to specify a different timezone.</p>
<input type="text" datetime="yyyy-MM-dd HH:mm:ssZ" ng-model="data.myDate" class="form-control" datetime-timezone="+0000">
<pre>myDate = {{data.myDate | json}}</pre>
<pre class="code"><code><input type="text" datetime="yyyy-MM-dd HH:mm:ssZ" ng-model="myDate" datetime-timezone="+0000"></code></pre>
<p>Also support expression.</p>
<input type="text" datetime="yyyy-MM-dd HH:mm:ssZ" ng-model="data.myDate" class="form-control" datetime-timezone="data.myTimezone">
<pre>myDate = {{data.myDate | json}}<br>myTimezone = {{data.myTimezone | json}}</pre>
<pre class="code"><code><input type="text" datetime="yyyy-MM-dd HH:mm:ssZ" ng-model="data.myDate" datetime-timezone="myTimezone"></code></pre>
<div class="form-group">
<label>
Timezone
<input type="text" ng-model="data.myTimezone" pattern="[+-]\d{2}:?\d{2}" class="form-control">
</label>
</div>
<h3>datetime-separator</h3>
<p>By the default, you can use left/right keys to navigate between each part of date. With this attribute, you will be able to use different keys to jump to next part.</p>
<input type="text" class="form-control" datetime="dd.MM.yyyy" ng-model="data.myDate" datetime-separator=",.-/">
<pre class="code"><code><input type="text" datetime="dd.MM.yyyy" ng-model="myDate" datetime-separator=",.-/"></code></pre>
<h3>Localizable formats</h3>
<p>The parser supports localizable formats in Angular.</p>
<div class="form-group" ng-repeat="format in formats">
<label>
{{format}}
<input type="text" datetime="{{format}}" class="form-control" ng-model="data.myDate">
</label>
</div>
<h3>Other tests</h3>
<div class="form-group">
<label for="duplicate-name">Duplicate name test</label>
<input type="text" datetime=",sss .sss" ng-model="data.myDate" class="form-control" id="duplicate-name">
</div>
<div class="form-group">
<label>
MySQL date part
<input type="text" class="form-control" datetime="yyyy-MM-dd" ng-model="data.myDate">
</label>
</div>
<div class="form-group">
<label>
Default timezone
<input type="text" class="form-control" datetime="yyyy-MM-dd HH:mm:ssZ" ng-model="data.myDate">
</label>
</div>
<div class="form-group">
<label>
UTC timezone
<input type="text" class="form-control" datetime="yyyy-MM-dd HH:mm:ssZ" ng-model="data.myDate" datetime-timezone="+0000">
</label>
</div>
<div class="form-group">
<label>
Custom Europe/Moscow timezone
<input type="text" class="form-control" datetime="yyyy-MM-dd HH:mm:ssZ" ng-model="data.myDate" datetime-timezone="+0300">
</label>
</div>
<div class="form-group">
<label>
datetime-model with min/max
<input type="text" class="form-control" datetime="yyyy-MM-dd" datetime-model="yyyy-MM-ddTHH:mm:ssZZ" ng-model="data.myDateString2" min="Jan 1, 2000">
<pre class="code"><code>{{data.myDateString2 | json}}</code></pre>
</label>
</div>
</body>
</html>