|
2 | 2 | <html> |
3 | 3 | <head> |
4 | 4 | <script>var exports = {}; </script> |
5 | | - <script src="../dist/cdn/js/kendo-intl.js"></script> |
| 5 | + <script src="../dist/npm/main.js"></script> |
6 | 6 |
|
7 | 7 | </head> |
8 | 8 | <body> |
9 | 9 | <input /> |
10 | 10 | <script> |
11 | | - var intl = exports.KendoIntl; |
| 11 | + var intl = exports; |
12 | 12 |
|
13 | | - var KEY_CODES = { |
14 | | - BACKSPACE: 8, |
15 | | - ARROWS: { |
16 | | - UP: 38, |
17 | | - DOWN: 40, |
18 | | - LEFT: 37, |
19 | | - RIGHT: 39 |
20 | | - } |
21 | | - }; |
22 | | - |
23 | | - var DateSetters = { |
24 | | - month: function(date, value) { |
25 | | - if (1 <= value && value <= 12) { |
26 | | - date.setMonth(value); |
27 | | - return true; |
28 | | - } |
29 | | - }, |
30 | | - day: function(date, value) { |
31 | | - var newDate = new Date(date); |
32 | | - newDate.setDate(value); |
33 | | - if (newDate.getMonth() === date.getMonth()) { |
34 | | - date.setDate(value); |
35 | | - return true; |
36 | | - } |
37 | | - }, |
38 | | - year: function(date, value) { |
39 | | - date.setFullYear(value); |
40 | | - return true; |
41 | | - } |
42 | | - } |
43 | | - |
44 | | - var DateModifiers = { |
45 | | - month: function(date, offset) { |
46 | | - date.setMonth(date.getMonth() + offset); |
47 | | - }, |
48 | | - day: function(date, offset) { |
49 | | - date.setDate(date.getDate() + offset); |
50 | | - }, |
51 | | - year: function(date, offset) { |
52 | | - date.setFullYear(date.getFullYear() + offset); |
53 | | - } |
54 | | - }; |
55 | | - |
56 | | - var Input = function(element, format, date) { |
57 | | - this.element = element; |
58 | | - this.parts = intl.splitDateFormat(format); |
59 | | - this.date = date; |
60 | | - this.element.addEventListener("keydown", this.onKeyDown.bind(this)); |
61 | | - this.element.addEventListener("keypress", this.onKeyPress.bind(this)); |
62 | | - this.init(); |
63 | | - }; |
64 | | - |
65 | | - Input.prototype = { |
66 | | - init: function() { |
67 | | - var parts = this.parts; |
68 | | - var inputValue = ''; |
69 | | - for (var idx = 0; idx < parts.length; idx++) { |
70 | | - var part = parts[idx]; |
71 | | - var value; |
72 | | - if (part.type === 'literal') { |
73 | | - value = part.pattern; |
74 | | - } else { |
75 | | - value = intl.formatDate(this.date, { pattern: part.pattern }); |
76 | | - if (part.names) { |
77 | | - part.names = intl.dateFormatNames('en', part.names); |
78 | | - } |
79 | | - } |
80 | | - part.value = value; |
81 | | - inputValue += value; |
82 | | - } |
83 | | - |
84 | | - this.elementValue = this.element.value = inputValue; |
85 | | - }, |
86 | | - |
87 | | - setValue: function() { |
88 | | - var parts = this.parts; |
89 | | - var inputValue = ''; |
90 | | - for (var idx = 0; idx < parts.length; idx++) { |
91 | | - var part = parts[idx]; |
92 | | - inputValue += part.name || part.value; |
93 | | - } |
94 | | - |
95 | | - this.elementValue = this.element.value = inputValue; |
96 | | - }, |
97 | | - |
98 | | - adjacentPart: function(idx, dir) { |
99 | | - var current = this.parts[idx]; |
100 | | - var next = this.parts[idx + dir]; |
101 | | - |
102 | | - if (next && next.type === 'literal') { |
103 | | - next = this.parts[idx + 2 * dir]; |
104 | | - if (dir > 0 && next) { |
105 | | - next.position = current.position + (current.name || current.value).length + this.parts[idx + dir].value.length; |
106 | | - } |
107 | | - } |
108 | | - |
109 | | - return next; |
110 | | - }, |
111 | | - |
112 | | - onKeyDown: function(e) { |
113 | | - var position = this.element.selectionStart; |
114 | | - var partIdx = this.getPartIndex(position); |
115 | | - var parts = this.parts; |
116 | | - var part = parts[partIdx]; |
117 | | - var keyCode = e.keyCode; |
118 | | - var backspace = keyCode == KEY_CODES.BACKSPACE; |
119 | | - var up = keyCode == KEY_CODES.ARROWS.UP; |
120 | | - var down = keyCode == KEY_CODES.ARROWS.DOWN; |
121 | | - var left = keyCode == KEY_CODES.ARROWS.LEFT; |
122 | | - var right = keyCode == KEY_CODES.ARROWS.RIGHT; |
123 | | - var handle = this._metaKey = backspace || up || down || left || right; |
124 | | - |
125 | | - if (backspace) { |
126 | | - if(!part.name) { |
127 | | - part.name = part.type; |
128 | | - this.setValue(); |
129 | | - } |
130 | | - delete part.currentValue; |
131 | | - } else if (up || down) { |
132 | | - delete part.name; |
133 | | - delete part.currentValue; |
134 | | - var offset = up ? 1 : -1; |
135 | | - DateModifiers[part.type](this.date, offset); |
136 | | - part.value = intl.formatDate(this.date, { pattern: part.pattern }); |
137 | | - this.setValue(); |
138 | | - } else if (left) { |
139 | | - part = this.adjacentPart(partIdx, -1); |
140 | | - } else if (right) { |
141 | | - part = this.adjacentPart(partIdx, 1); |
142 | | - } |
143 | | - |
144 | | - if (handle) { |
145 | | - e.preventDefault(); |
146 | | - if (part) { |
147 | | - this.element.setSelectionRange(part.position, part.position + (part.name || part.value).length); |
148 | | - } |
149 | | - } |
150 | | - }, |
151 | | - |
152 | | - onKeyPress: function(e) { |
153 | | - var position = this.element.selectionStart; |
154 | | - var partIdx = this.getPartIndex(position); |
155 | | - var parts = this.parts; |
156 | | - var part = parts[partIdx]; |
157 | | - if (!this._metaKey) { |
158 | | - e.preventDefault(); |
159 | | - var key = e.key.toLowerCase(); |
160 | | - var value = (part.currentValue || '') + key; |
161 | | - if (part.names) { |
162 | | - if (!this.trySetName(value, part) && part.currentValue) { |
163 | | - this.trySetName(key, part); |
164 | | - } |
165 | | - } else { |
166 | | - if (!this.trySetNumber(value, part)) { |
167 | | - this.trySetNumber(key, part); |
168 | | - } |
169 | | - } |
170 | | - } |
171 | | - }, |
172 | | - |
173 | | - trySetNumber: function(value, part) { |
174 | | - var number = parseInt(value, 10); |
175 | | - if (!isNaN(number) && DateSetters[part.type](this.date, number)) { |
176 | | - delete part.name; |
177 | | - part.currentValue = value; |
178 | | - part.value = value; |
179 | | - this.setValue(); |
180 | | - this.element.setSelectionRange(part.position, part.position + value.length); |
181 | | - return true; |
182 | | - } |
183 | | - }, |
184 | | - |
185 | | - trySetName: function(value, part) { |
186 | | - for (let idx = 0; idx < part.names.length; idx++) { |
187 | | - if (part.names[idx].toLowerCase().startsWith(value)) { |
188 | | - this.date.setMonth(idx); |
189 | | - part.currentValue = value; |
190 | | - part.value = intl.formatDate(this.date, { pattern: part.pattern }); |
191 | | - delete part.name; |
192 | | - this.setValue(); |
193 | | - this.element.setSelectionRange(part.position, part.position + value.length); |
194 | | - return true; |
195 | | - } |
196 | | - } |
197 | | - |
198 | | - }, |
199 | | - |
200 | | - getPartIndex: function(position) { |
201 | | - var parts = this.parts; |
202 | | - var length = 0; |
203 | | - var idx = -1; |
204 | | - var part; |
205 | | - |
206 | | - do { |
207 | | - idx++; |
208 | | - part = parts[idx]; |
209 | | - part.position = length; |
210 | | - length += (part.name || part.value).length; |
211 | | - } while (length < position); |
212 | | - |
213 | | - if (part.type === "literal") { |
214 | | - idx += parts[idx + 1] ? 1 : -1; |
215 | | - if (parts[idx]) { |
216 | | - parts[idx].position = length; |
217 | | - } |
218 | | - } |
219 | | - |
220 | | - return idx; |
221 | | - } |
222 | | - }; |
223 | | - |
224 | | - var input = new Input(document.getElementsByTagName("input")[0], "MMMM/d/y", new Date()); |
| 13 | + console.log(intl.weekendRange('en')); |
225 | 14 | </script> |
226 | 15 | </body> |
227 | 16 | </html> |
0 commit comments