9 | http://jsbeautifier.org/
10 |
11 |
12 | You are free to use this in any way you want, in case you find this useful or working for you.
13 |
14 | Usage:
15 | style_html(html_source);
16 |
17 | style_html(html_source, options);
18 |
19 | The options are:
20 | indent_size (default 4) — indentation size,
21 | indent_char (default space) — character to indent with,
22 | max_char (default 70) - maximum amount of characters per line,
23 | brace_style (default "collapse") - "collapse" | "expand" | "end-expand"
24 | put braces on the same line as control statements (default), or put braces on own line (Allman / ANSI style), or just put end braces on own line.
25 | unformatted (default ['a']) - list of tags, that shouldn't be reformatted
26 | indent_scripts (default normal) - "keep"|"separate"|"normal"
27 |
28 | e.g.
29 |
30 | style_html(html_source, {
31 | 'indent_size': 2,
32 | 'indent_char': ' ',
33 | 'max_char': 78,
34 | 'brace_style': 'expand',
35 | 'unformatted': ['a', 'sub', 'sup', 'b', 'i', 'u']
36 | });
37 | */
38 |
39 | function style_html(html_source, options) {
40 | //Wrapper function to invoke all the necessary constructors and deal with the output.
41 |
42 | var multi_parser,
43 | indent_size,
44 | indent_character,
45 | max_char,
46 | brace_style;
47 |
48 | options = options || {};
49 | indent_size = options.indent_size || 4;
50 | indent_character = options.indent_char || ' ';
51 | brace_style = options.brace_style || 'collapse';
52 | max_char = options.max_char === 0 ? Infinity : options.max_char || 70;
53 | unformatted = options.unformatted || ['a'];
54 |
55 | function Parser() {
56 |
57 | this.pos = 0; //Parser position
58 | this.token = '';
59 | this.current_mode = 'CONTENT'; //reflects the current Parser mode: TAG/CONTENT
60 | this.tags = { //An object to hold tags, their position, and their parent-tags, initiated with default values
61 | parent: 'parent1',
62 | parentcount: 1,
63 | parent1: ''
64 | };
65 | this.tag_type = '';
66 | this.token_text = this.last_token = this.last_text = this.token_type = '';
67 |
68 | this.Utils = { //Uilities made available to the various functions
69 | whitespace: "\n\r\t ".split(''),
70 | single_token: 'br,input,link,meta,!doctype,basefont,base,area,hr,wbr,param,img,isindex,?xml,embed'.split(','), //all the single tags for HTML
71 | extra_liners: 'head,body,/html'.split(','), //for tags that need a line of whitespace before them
72 | in_array: function (what, arr) {
73 | for (var i = 0; i < arr.length; i++) {
74 | if (what === arr[i]) {
75 | return true;
76 | }
77 | }
78 | return false;
79 | }
80 | }
81 |
82 | this.get_content = function () { //function to capture regular content between tags
83 |
84 | var input_char = '';
85 | var content = [];
86 | var space = false; //if a space is needed
87 | while (this.input.charAt(this.pos) !== '<') {
88 | if (this.pos >= this.input.length) {
89 | return content.length ? content.join('') : ['', 'TK_EOF'];
90 | }
91 |
92 | input_char = this.input.charAt(this.pos);
93 | this.pos++;
94 | this.line_char_count++;
95 |
96 | if (this.Utils.in_array(input_char, this.Utils.whitespace)) {
97 | if (content.length) {
98 | space = true;
99 | }
100 | this.line_char_count--;
101 | continue; //don't want to insert unnecessary space
102 | }
103 | else if (space) {
104 | if (this.line_char_count >= this.max_char) { //insert a line when the max_char is reached
105 | content.push('\n');
106 | for (var i = 0; i < this.indent_level; i++) {
107 | content.push(this.indent_string);
108 | }
109 | this.line_char_count = 0;
110 | }
111 | else {
112 | content.push(' ');
113 | this.line_char_count++;
114 | }
115 | space = false;
116 | }
117 | content.push(input_char); //letter at-a-time (or string) inserted to an array
118 | }
119 | return content.length ? content.join('') : '';
120 | }
121 |
122 | this.get_contents_to = function (name) { //get the full content of a script or style to pass to js_beautify
123 | if (this.pos == this.input.length) {
124 | return ['', 'TK_EOF'];
125 | }
126 | var input_char = '';
127 | var content = '';
128 | var reg_match = new RegExp('\<\/' + name + '\\s*\>', 'igm');
129 | reg_match.lastIndex = this.pos;
130 | var reg_array = reg_match.exec(this.input);
131 | var end_script = reg_array ? reg_array.index : this.input.length; //absolute end of script
132 | if (this.pos < end_script) { //get everything in between the script tags
133 | content = this.input.substring(this.pos, end_script);
134 | this.pos = end_script;
135 | }
136 | return content;
137 | }
138 |
139 | this.record_tag = function (tag) { //function to record a tag and its parent in this.tags Object
140 | if (this.tags[tag + 'count']) { //check for the existence of this tag type
141 | this.tags[tag + 'count']++;
142 | this.tags[tag + this.tags[tag + 'count']] = this.indent_level; //and record the present indent level
143 | }
144 | else { //otherwise initialize this tag type
145 | this.tags[tag + 'count'] = 1;
146 | this.tags[tag + this.tags[tag + 'count']] = this.indent_level; //and record the present indent level
147 | }
148 | this.tags[tag + this.tags[tag + 'count'] + 'parent'] = this.tags.parent; //set the parent (i.e. in the case of a div this.tags.div1parent)
149 | this.tags.parent = tag + this.tags[tag + 'count']; //and make this the current parent (i.e. in the case of a div 'div1')
150 | }
151 |
152 | this.retrieve_tag = function (tag) { //function to retrieve the opening tag to the corresponding closer
153 | if (this.tags[tag + 'count']) { //if the openener is not in the Object we ignore it
154 | var temp_parent = this.tags.parent; //check to see if it's a closable tag.
155 | while (temp_parent) { //till we reach '' (the initial value);
156 | if (tag + this.tags[tag + 'count'] === temp_parent) { //if this is it use it
157 | break;
158 | }
159 | temp_parent = this.tags[temp_parent + 'parent']; //otherwise keep on climbing up the DOM Tree
160 | }
161 | if (temp_parent) { //if we caught something
162 | this.indent_level = this.tags[tag + this.tags[tag + 'count']]; //set the indent_level accordingly
163 | this.tags.parent = this.tags[temp_parent + 'parent']; //and set the current parent
164 | }
165 | delete this.tags[tag + this.tags[tag + 'count'] + 'parent']; //delete the closed tags parent reference...
166 | delete this.tags[tag + this.tags[tag + 'count']]; //...and the tag itself
167 | if (this.tags[tag + 'count'] == 1) {
168 | delete this.tags[tag + 'count'];
169 | }
170 | else {
171 | this.tags[tag + 'count']--;
172 | }
173 | }
174 | }
175 |
176 | this.get_tag = function () { //function to get a full tag and parse its type
177 | var input_char = '';
178 | var content = [];
179 | var space = false;
180 |
181 | do {
182 | if (this.pos >= this.input.length) {
183 | return content.length ? content.join('') : ['', 'TK_EOF'];
184 | }
185 |
186 | input_char = this.input.charAt(this.pos);
187 | this.pos++;
188 | this.line_char_count++;
189 |
190 | if (this.Utils.in_array(input_char, this.Utils.whitespace)) { //don't want to insert unnecessary space
191 | space = true;
192 | this.line_char_count--;
193 | continue;
194 | }
195 |
196 | if (input_char === "'" || input_char === '"') {
197 | if (!content[1] || content[1] !== '!') { //if we're in a comment strings don't get treated specially
198 | input_char += this.get_unformatted(input_char);
199 | space = true;
200 | }
201 | }
202 |
203 | if (input_char === '=') { //no space before =
204 | space = false;
205 | }
206 |
207 | if (content.length && content[content.length - 1] !== '=' && input_char !== '>' && space) { //no space after = or before >
208 | if (this.line_char_count >= this.max_char) {
209 | this.print_newline(false, content);
210 | this.line_char_count = 0;
211 | }
212 | else {
213 | content.push(' ');
214 | this.line_char_count++;
215 | }
216 | space = false;
217 | }
218 | content.push(input_char); //inserts character at-a-time (or string)
219 | } while (input_char !== '>');
220 |
221 | var tag_complete = content.join('');
222 | var tag_index;
223 | if (tag_complete.indexOf(' ') != -1) { //if there's whitespace, thats where the tag name ends
224 | tag_index = tag_complete.indexOf(' ');
225 | }
226 | else { //otherwise go with the tag ending
227 | tag_index = tag_complete.indexOf('>');
228 | }
229 | var tag_check = tag_complete.substring(1, tag_index).toLowerCase();
230 | if (tag_complete.charAt(tag_complete.length - 2) === '/' ||
231 | this.Utils.in_array(tag_check, this.Utils.single_token)) { //if this tag name is a single tag type (either in the list or has a closing /)
232 | this.tag_type = 'SINGLE';
233 | } else if (tag_check === 'script') { //for later script handling
234 | this.record_tag(tag_check);
235 | this.tag_type = 'SCRIPT';
236 | }
237 | else if (tag_check === 'style') { //for future style handling (for now it justs uses get_content)
238 | this.record_tag(tag_check);
239 | this.tag_type = 'STYLE';
240 | }
241 | else if (this.Utils.in_array(tag_check, unformatted)) { // do not reformat the "unformatted" tags
242 | var comment = this.get_unformatted('', tag_complete); //...delegate to get_unformatted function
243 | content.push(comment);
244 | this.tag_type = 'SINGLE';
245 | }
246 | else if (tag_check.charAt(0) === '!') { //peek for so...
249 | var comment = this.get_unformatted('-->', tag_complete); //...delegate to get_unformatted
250 | content.push(comment);
251 | }
252 | this.tag_type = 'START';
253 | }
254 | else if (tag_check.indexOf('[endif') != -1) {//peek for ', tag_complete);
265 | content.push(comment);
266 | this.tag_type = 'SINGLE';
267 | }
268 | }
269 | else {
270 | if (tag_check.charAt(0) === '/') { //this tag is a double tag so check for tag-ending
271 | this.retrieve_tag(tag_check.substring(1)); //remove it and all ancestors
272 | this.tag_type = 'END';
273 | }
274 | else { //otherwise it's a start-tag
275 | this.record_tag(tag_check); //push it on the tag stack
276 | this.tag_type = 'START';
277 | }
278 | if (this.Utils.in_array(tag_check, this.Utils.extra_liners)) { //check if this double needs an extra line
279 | this.print_newline(true, this.output);
280 | }
281 | }
282 | return content.join(''); //returns fully formatted tag
283 | }
284 |
285 | this.get_unformatted = function (delimiter, orig_tag) { //function to return unformatted content in its entirety
286 |
287 | if (orig_tag && orig_tag.indexOf(delimiter) != -1) {
288 | return '';
289 | }
290 | var input_char = '';
291 | var content = '';
292 | var space = true;
293 | do {
294 |
295 | if (this.pos >= this.input.length) {
296 | return content;
297 | }
298 |
299 | input_char = this.input.charAt(this.pos);
300 | this.pos++;
301 |
302 | if (this.Utils.in_array(input_char, this.Utils.whitespace)) {
303 | if (!space) {
304 | this.line_char_count--;
305 | continue;
306 | }
307 | if (input_char === '\n' || input_char === '\r') {
308 | content += '\n';
309 | /* Don't change tab indention for unformatted blocks. If using code for html editing, this will greatly affect tags if they are specified in the 'unformatted array'
310 | for (var i=0; i 0) {
412 | this.indent_level--;
413 | }
414 | }
415 | }
416 | return this;
417 | }
418 |
419 | /*_____________________--------------------_____________________*/
420 |
421 | multi_parser = new Parser(); //wrapping functions Parser
422 | multi_parser.printer(html_source, indent_character, indent_size, max_char, brace_style); //initialize starting values
423 |
424 | while (true) {
425 | var t = multi_parser.get_token();
426 | multi_parser.token_text = t[0];
427 | multi_parser.token_type = t[1];
428 |
429 | if (multi_parser.token_type === 'TK_EOF') {
430 | break;
431 | }
432 |
433 | switch (multi_parser.token_type) {
434 | case 'TK_TAG_START':
435 | multi_parser.print_newline(false, multi_parser.output);
436 | multi_parser.print_token(multi_parser.token_text);
437 | multi_parser.indent();
438 | multi_parser.current_mode = 'CONTENT';
439 | break;
440 | case 'TK_TAG_STYLE':
441 | case 'TK_TAG_SCRIPT':
442 | multi_parser.print_newline(false, multi_parser.output);
443 | multi_parser.print_token(multi_parser.token_text);
444 | multi_parser.current_mode = 'CONTENT';
445 | break;
446 | case 'TK_TAG_END':
447 | //Print new line only if the tag has no content and has child
448 | if (multi_parser.last_token === 'TK_CONTENT' && multi_parser.last_text === '') {
449 | var tag_name = multi_parser.token_text.match(/\w+/)[0];
450 | var tag_extracted_from_last_output = multi_parser.output[multi_parser.output.length - 1].match(/<\s*(\w+)/);
451 | if (tag_extracted_from_last_output === null || tag_extracted_from_last_output[1] !== tag_name)
452 | multi_parser.print_newline(true, multi_parser.output);
453 | }
454 | multi_parser.print_token(multi_parser.token_text);
455 | multi_parser.current_mode = 'CONTENT';
456 | break;
457 | case 'TK_TAG_SINGLE':
458 | multi_parser.print_newline(false, multi_parser.output);
459 | multi_parser.print_token(multi_parser.token_text);
460 | multi_parser.current_mode = 'CONTENT';
461 | break;
462 | case 'TK_CONTENT':
463 | if (multi_parser.token_text !== '') {
464 | multi_parser.print_token(multi_parser.token_text);
465 | }
466 | multi_parser.current_mode = 'TAG';
467 | break;
468 | case 'TK_STYLE':
469 | case 'TK_SCRIPT':
470 | if (multi_parser.token_text !== '') {
471 | multi_parser.output.push('\n');
472 | var text = multi_parser.token_text;
473 | if (multi_parser.token_type == 'TK_SCRIPT') {
474 | var _beautifier = typeof js_beautify == 'function' && js_beautify;
475 | } else if (multi_parser.token_type == 'TK_STYLE') {
476 | var _beautifier = typeof css_beautify == 'function' && css_beautify;
477 | }
478 |
479 | if (options.indent_scripts == "keep") {
480 | var script_indent_level = 0;
481 | } else if (options.indent_scripts == "separate") {
482 | var script_indent_level = -multi_parser.indent_level;
483 | } else {
484 | var script_indent_level = 1;
485 | }
486 |
487 | var indentation = multi_parser.get_full_indent(script_indent_level);
488 | if (_beautifier) {
489 | // call the Beautifier if avaliable
490 | text = _beautifier(text.replace(/^\s*/, indentation), options);
491 | } else {
492 | // simply indent the string otherwise
493 | var white = text.match(/^\s*/)[0];
494 | var _level = white.match(/[^\n\r]*$/)[0].split(multi_parser.indent_string).length - 1;
495 | var reindent = multi_parser.get_full_indent(script_indent_level - _level);
496 | text = text.replace(/^\s*/, indentation)
497 | .replace(/\r\n|\r|\n/g, '\n' + reindent)
498 | .replace(/\s*$/, '');
499 | }
500 | if (text) {
501 | multi_parser.print_token(text);
502 | multi_parser.print_newline(true, multi_parser.output);
503 | }
504 | }
505 | multi_parser.current_mode = 'TAG';
506 | break;
507 | }
508 | multi_parser.last_token = multi_parser.token_type;
509 | multi_parser.last_text = multi_parser.token_text;
510 | }
511 | return multi_parser.output.join('');
512 | }
--------------------------------------------------------------------------------
/build.js:
--------------------------------------------------------------------------------
1 | var esbuild = require('esbuild');
2 |
3 | esbuild.build({
4 | entryPoints: ['./js/angular-material-datetimepicker.js'],
5 | minify: true,
6 | outdir: 'dist',
7 | sourcemap: true,
8 | outExtension: { '.js': '.min.js' },
9 | }).catch(function(err) {process.exit(1);});
10 |
11 | esbuild.build({
12 | entryPoints: ['./css/material-datetimepicker.css'],
13 | minify: true,
14 | outdir: 'dist',
15 | outExtension: { '.css': '.min.css' },
16 | }).catch(function(err) {process.exit(1);});
17 |
--------------------------------------------------------------------------------
/css/material-datetimepicker.css:
--------------------------------------------------------------------------------
1 | md-dialog.dtp {
2 | font-size: 14px;
3 | line-height: 1.42857143;
4 | color: #333;
5 | background-color: #fff;
6 | max-height: none;
7 | min-width: 300px;
8 | width: 300px;
9 | }
10 |
11 | .noselect {
12 | -webkit-user-select: none;
13 | -moz-user-select: none;
14 | -ms-user-select: none;
15 | user-select: none;
16 | }
17 |
18 | .dtp *:focus {
19 | outline: none !important;
20 | }
21 |
22 | .dtp table {
23 | border-spacing: 0;
24 | border-collapse: collapse;
25 | width: 100%;
26 | }
27 |
28 | .dtp .table > tbody > tr > td,
29 | .dtp .table > tbody > tr > th,
30 | .dtp .table > tfoot > tr > td,
31 | .dtp .table > tfoot > tr > th,
32 | .dtp .table > thead > tr > td,
33 | .dtp .table > thead > tr > th {
34 | padding: 8px;
35 | line-height: 1.42857143;
36 | vertical-align: top;
37 | border-top: 1px solid #ddd;
38 | }
39 |
40 | .dtp, .dtp * {
41 | box-sizing: border-box !important;
42 | }
43 |
44 | .dtp > .dtp-content {
45 | max-width: 300px;
46 | max-height: 500px;
47 | }
48 |
49 | .dtp > .dtp-content > .dtp-date-view > header.dtp-header {
50 | background: #689F38;
51 | color: #fff;
52 | text-align: center;
53 | }
54 |
55 | .dtp div.dtp-date, .dtp div.dtp-time {
56 | background: #8BC34A;
57 | text-align: center;
58 | color: #fff;
59 | padding: 10px;
60 | }
61 |
62 | .dtp div.dtp-date > div {
63 | padding: 0;
64 | margin: 0;
65 | }
66 |
67 | .dtp div.dtp-actual-month {
68 | font-size: 1.5em;
69 | cursor: pointer;
70 | }
71 |
72 | md-menu-content.dtp-month-list {
73 | background-color: #ffffff;
74 | }
75 |
76 | .dtp div.dtp-actual-num {
77 | font-size: 2em;
78 | line-height: 0.9;
79 | }
80 |
81 | .dtp div.dtp-actual-maxtime {
82 | font-size: 2em;
83 | line-height: 0.9;
84 | color: #DCEDC8;
85 | }
86 |
87 | .dtp div.dtp-actual-maxtime span.selected {
88 | color: #fff;
89 | }
90 |
91 | .dtp div.dtp-actual-year {
92 | font-size: 1.6em;
93 | color: #DCEDC8;
94 | cursor: pointer;
95 | }
96 |
97 | md-menu-content.dtp-year-list {
98 | background-color: #ffffff;
99 | }
100 |
101 | .dtp div.dtp-month-btn {
102 | font-size: 1.4em;
103 | line-height: 30px;
104 | cursor: pointer;
105 | }
106 |
107 | .dtp div.dtp-month-btn-prev {
108 | text-align: right;
109 | }
110 |
111 | .dtp div.dtp-month-btn-next {
112 | text-align: left;
113 | }
114 |
115 | .dtp div.dtp-year-btn {
116 | font-size: 1.4em;
117 | line-height: 30px;
118 | cursor: pointer;
119 | color: #DCEDC8;
120 | }
121 |
122 | .dtp div.dtp-year-btn-prev {
123 | text-align: right;
124 | }
125 |
126 |
127 | .dtp div.dtp-year-btn-next {
128 | text-align: left;
129 | }
130 |
131 | .dtp div.dtp-picker {
132 | padding: 10px 10px 0 10px;
133 | text-align: center;
134 |
135 | /* Prevent dialog resizing when switcing between date/time */
136 | overflow: hidden;
137 | }
138 |
139 | .dtp div.dtp-picker-month, .dtp div.dtp-actual-time {
140 | font-size: 1em;
141 | font-weight: 500;
142 | text-align: center;
143 | }
144 |
145 | .dtp div.dtp-actual-time.p60 span.selected {
146 | color: #689F38;
147 | }
148 |
149 | .dtp .dtp-close {
150 | position: absolute;
151 | top: 0;
152 | right: 5px;
153 | font-size: 16px;
154 | }
155 |
156 | .dtp .dtp-close > a {
157 | color: #fff;
158 | text-decoration: none;
159 | }
160 |
161 | .dtp .dtp-close > a > i {
162 | font-size: 1em;
163 | }
164 |
165 | .dtp table.dtp-picker-days {
166 | margin: 0;
167 | min-height: 260px;
168 | }
169 |
170 | .dtp md-virtual-repeat-container.months {
171 | height: 260px;
172 | }
173 |
174 | .dtp table.dtp-picker-days, .dtp table.dtp-picker-days tr, .dtp table.dtp-picker-days tr > td {
175 | border: none;
176 | }
177 |
178 | .dtp table.dtp-picker-days tr > td {
179 | font-size: 12px;
180 | text-align: center;
181 | padding: 0;
182 | }
183 |
184 | .dtp table.dtp-picker-days tr > td > span.dtp-select-day {
185 | color: #BDBDBD !important;
186 | }
187 |
188 | .dtp table.dtp-picker-days tr > td, .dtp table.dtp-picker-days tr > td > .dtp-select-day {
189 | width: 36px;
190 | height: 36px;
191 | }
192 |
193 | .dtp table.dtp-picker-days tr > td > .dtp-select-day {
194 | display: inline-block;
195 | }
196 |
197 | .dtp table.dtp-picker-days tr > td > .dtp-select-day, .dtp .dtp-picker-time > a {
198 | color: #212121;
199 | text-decoration: none;
200 | padding: 10px;
201 | border-radius: 50% !important;
202 | }
203 |
204 | .dtp table.dtp-picker-days tr > td > a.selected {
205 | background: #8BC34A;
206 | color: #fff;
207 | }
208 |
209 | .dtp table.dtp-picker-days tr > td > a.selected.hilite {
210 | padding: 6px;
211 | font-size: 16px;
212 | font-weight: 500;
213 | background: #8BC34A;
214 | color: #fff;
215 | }
216 |
217 | .dtp table.dtp-picker-days tr > td > a.hilite:not(.selected) {
218 | padding: 6px;
219 | font-size: 16px;
220 | font-weight: 500;
221 | color: #8BC34A;
222 | }
223 |
224 | .dtp table.dtp-picker-days tr > td > a:hover:not(.selected) {
225 | background: #dddddd;
226 | }
227 |
228 | .dtp table.dtp-picker-days tr > th {
229 | color: #757575;
230 | text-align: center;
231 | font-weight: 700;
232 | padding: 2px 3px;
233 | width: 38px;
234 | height: 28px;
235 | }
236 |
237 | .dtp .p10 > a {
238 | color: #689F38;
239 | text-decoration: none;
240 | }
241 |
242 | .dtp .p10 {
243 | width: 10%;
244 | display: inline-block;
245 | }
246 |
247 | .dtp .p20 {
248 | width: 20%;
249 | display: inline-block;
250 | }
251 |
252 | .dtp .p60 {
253 | width: 60%;
254 | display: inline-block;
255 | }
256 |
257 | .dtp .p80 {
258 | width: 80%;
259 | display: inline-block;
260 | }
261 |
262 | .dtp div.dtp-picker-datetime {
263 | padding-bottom: 25px;
264 | }
265 |
266 | .dtp span.dtp-actual-meridien {
267 | font-size: 0.6em;
268 | }
269 |
270 | .dtp div.dtp-actual-meridien {
271 | height: 20px;
272 | }
273 |
274 | .dtp a.dtp-meridien-am, .dtp a.dtp-meridien-pm {
275 | position: relative;
276 | color: #212121;
277 | font-weight: 500;
278 | padding: 7px 5px;
279 | border-radius: 50% !important;
280 | text-decoration: none;
281 | background: #eee;
282 | font-size: 10px;
283 | }
284 |
285 | .dtp .dtp-actual-meridien a.selected {
286 | background: #689F38;
287 | color: #fff;
288 | }
289 |
290 | .dtp .dtp-picker-time > a {
291 | display: block;
292 | line-height: 23px;
293 | padding: 3px 3px 3px 3px;
294 | }
295 |
296 | .dtp .dtp-picker-time {
297 | position: absolute;
298 | width: 30px;
299 | height: 30px;
300 | font-size: 1.1em;
301 | border-radius: 50%;
302 | cursor: pointer;
303 | text-align: center !important;
304 | }
305 |
306 | .dtp .dtp-picker-time > a.dtp-select-hour.selected {
307 | background: #689F38;
308 | color: #fff;
309 | }
310 |
311 | .dtp .dtp-picker-time > a.dtp-select-hour.disabled, .dtp .dtp-picker-time > a.dtp-select-minute.disabled {
312 | color: #757575;
313 | }
314 |
315 | .dtp .dtp-picker-time > a.dtp-select-minute.selected {
316 | background: #8BC34A;
317 | color: #fff;
318 | }
319 |
320 | .dtp div.dtp-picker-clock {
321 | margin: 10px 20px 0 20px;
322 | padding: 10px;
323 | border-radius: 50% !important;
324 | background: #eee;
325 | direction: ltr;
326 | cursor: default;
327 | }
328 |
329 | .dtp-clock-center {
330 | width: 15px;
331 | height: 15px;
332 | background: #757575;
333 | border-radius: 50%;
334 | position: absolute;
335 | z-index: 50;
336 | }
337 |
338 | .dtp .dtp-hand, .dtp .dtp-hour-hand {
339 | position: absolute;
340 | width: 4px;
341 | margin-left: -2px;
342 | background: #BDBDBD;
343 | -moz-transform: rotate(0deg);
344 | -ms-transform: rotate(0deg);
345 | -webkit-transform: rotate(0deg);
346 | transform: rotate(0deg);
347 | -moz-transform-origin: bottom;
348 | -ms-transform-origin: bottom;
349 | -webkit-transform-origin: bottom;
350 | transform-origin: bottom;
351 | z-index: 1;
352 | }
353 |
354 | .dtp .dtp-minute-hand {
355 | width: 2px;
356 | margin-left: -1px;
357 | }
358 |
359 | .dtp .dtp-second-hand {
360 | width: 1px;
361 | margin-left: -1px;
362 | }
363 |
364 | .dtp .dtp-hand.on {
365 | background: #8BC34A;
366 | }
367 |
368 | .dtp .dtp-buttons {
369 | padding-bottom: 10px;
370 | text-align: right;
371 | }
372 |
373 | .dtp.hidden, .dtp .hidden {
374 | display: none;
375 | }
376 |
377 | .dtp .invisible {
378 | visibility: hidden;
379 | }
380 |
381 | .dtp .left {
382 | float: left;
383 | }
384 |
385 | .dtp .right {
386 | float: right;
387 | }
388 |
389 | .dtp .clearfix {
390 | clear: both;
391 | }
392 |
393 | .dtp .center {
394 | text-align: center;
395 | }
396 |
397 | [dir=rtl] .dtp div.dtp-year-btn-next, [dir=rtl] .dtp div.dtp-month-btn-next,
398 | [dir=rtl] .dtp div.dtp-year-btn-prev, [dir=rtl] .dtp div.dtp-month-btn-prev {
399 | -ms-transform: rotate(180deg);
400 | -webkit-transform: rotate(180deg);
401 | transform: rotate(180deg);
402 | }
403 |
404 | .dtp-btn-today, .dtp-btn-ok, .dtp-btn-cancel {
405 | min-width: 70px;
406 | }
407 |
408 | .dtp-clear {
409 | position: absolute;
410 | top: 0;
411 | right: -10px;
412 | }
413 |
414 | /* Remove IE clear button */
415 | .dtp-no-msclear::-ms-clear {
416 | display: none;
417 | width : 0;
418 | height: 0;
419 | }
420 |
421 | .dtp-btn-calendar {
422 | position: absolute;
423 | top: -3px;
424 | left: -10px;
425 | }
426 |
427 | .dtp-input {
428 | margin-left: 30px;
429 | max-width: calc(100% - 30px);
430 | }
431 |
--------------------------------------------------------------------------------
/dist/angular-material-datetimepicker.min.js:
--------------------------------------------------------------------------------
1 | (function(){"use strict";function P(o){var N="ngMaterialDatePicker",G="data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTExLjk5IDJDNi40NyAyIDIgNi40OCAyIDEyczQuNDcgMTAgOS45OSAxMEMxNy41MiAyMiAyMiAxNy41MiAyMiAxMlMxNy41MiAyIDExLjk5IDJ6TTEyIDIwYy00LjQyIDAtOC0zLjU4LTgtOHMzLjU4LTggOC04IDggMy41OCA4IDgtMy41OCA4LTggOHoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMTIuNSA3SDExdjZsNS4yNSAzLjE1Ljc1LTEuMjMtNC41LTIuNjd6Ii8+PC9zdmc+",Q="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkgM2gtMVYxaC0ydjJIOFYxSDZ2Mkg1Yy0xLjExIDAtMS45OS45LTEuOTkgMkwzIDE5YzAgMS4xLjg5IDIgMiAyaDE0YzEuMSAwIDItLjkgMi0yVjVjMC0xLjEtLjktMi0yLTJ6bTAgMTZINVY4aDE0djExek03IDEwaDV2NUg3eiIvPjwvc3ZnPg==",M={DATE:0,HOUR:1,MINUTE:2},V=function(i,n){return i=angular.element(i),"getComputedStyle"in window?window.getComputedStyle(i[0])[n]:i.css(n)},H=` ◄
{{picker.currentDate.format("MMM")|uppercase}}
{{itemMonth}} ►
{{picker.currentDate.format("DD")}}
◄
{{picker.currentDate.format("YYYY")}}
{{itemYear}} ►
{{picker.currentNearestMinute().format(picker.params.shortTime ? "hh":"HH")}}:{{picker.currentNearestMinute().format("mm")}} {{picker.currentNearestMinute().format(picker.params.shortTime ? "hh":"HH")}}:{{picker.currentNearestMinute().format("mm")}}:{{picker.currentNearestMinute().format("ss")}} {{picker.currentDate.format("A")}}
{{picker.currentNearestMinute().format(picker.params.shortTime?"hh":"HH")}}:{{picker.currentNearestMinute().format("mm")}}
{{picker.currentNearestMinute().format(picker.params.shortTime?"hh":"HH")}}:{{picker.currentNearestMinute().format("mm")}}:{{picker.currentNearestMinute().format("ss")}}
{{::picker.params.todayText}} {{::picker.params.cancelText}} {{::picker.params.okText}} `;angular.module(N,["ngMaterial"]).factory("mdcDefaultParams",function(){var i={date:!0,time:!0,minutes:!0,seconds:!1,format:"YYYY-MM-DD",minDate:null,maxDate:null,currentDate:null,lang:window.navigator.userLanguage||window.navigator.language||"en",weekStart:0,shortTime:!1,cancelText:"Cancel",okText:"OK",amText:"AM",pmText:"PM",todayBtn:!0,todayText:"Today",disableDates:[],weekDays:!1,disableParentScroll:!1,autoOk:!1,editInput:!1,clickOutsideToClose:!1,minuteSteps:5,showIcon:!1,showClear:!0,template:H,templateUrl:"",targetEvent:null,openFrom:null,closeTo:null,dayOfWeekLen:1,hasBackdrop:!0};return function(n){if(n)for(var a in n)i.hasOwnProperty(a)&&n.hasOwnProperty(a)&&(i[a]=n[a]);return i}}).directive("mdcDatetimePicker",["$mdDialog","$timeout","$compile","$parse",function(i,n,a,r){return{restrict:"A",require:"ngModel",scope:{currentDate:"=ngModel",ngModelOptions:"=",ngChange:"&",time:"=",date:"=",minutes:"=",seconds:"=",minDate:"=",maxDate:"=",disableDates:"=",weekDays:"=",shortTime:"=",weekStart:"=",format:"@",cancelText:"@",okText:"@",lang:"@",amText:"@",pmText:"@",showTodaysDate:"@",todayBtn:"=",todayText:"@",disableParentScroll:"=",autoOk:"=",editInput:"=",clickOutsideToClose:"=",minuteSteps:"=",showIcon:"=",showClear:"=",templateUrl:"@",dayOfWeekLen:"=",hasBackdrop:"="},link:function(t,s,f,e){var d=!1;t.format||(t.date&&t.time&&t.seconds?t.format="YYYY-MM-DD HH:mm:ss":t.date&&t.time?t.format="YYYY-MM-DD HH:mm":t.date?t.format="YYYY-MM-DD":t.format="HH:mm");var S=null;t.showTodaysDate!==void 0&&t.showTodaysDate!=="false"&&(S=o()),angular.isString(t.currentDate)&&t.currentDate!==""&&(t.currentDate=o(t.currentDate,t.format));var c;if(e){var u={"*":"$inherit",debounce:500};angular.version.major===1&&angular.version.minor>5?(e.$options=e.$options.createChild(u),e.$options.getOption("timezone")&&(c=e.$options.getOption("timezone"))):(t.ngModelOptions&&t.ngModelOptions.timezone&&(u.timezone=t.ngModelOptions.timezone),e.$options=u,e.$options.timezone&&(c=e.$options.timezone)),(c==="utc"||c==="UTC")&&(c=0),e.$formatters.push(function(D){if(!(typeof D>"u")){var p=o(D);return p.isValid()?p.format(t.format):""}}),e.$parsers.push(function(D){if(!(typeof D>"u")){var p=o(D,t.format);return c!==void 0&&p.utcOffset(c,p._tzm===void 0),t.minDate&&e.$setValidity("min",!p.isBefore(t.minDate)),t.maxDate&&e.$setValidity("max",!p.isAfter(t.maxDate)),e.$setValidity("format",o(D,t.format,!0).isValid()),p.isValid()?p._isUTC?p:p.toDate():""}})}function v(D){if(D.preventDefault(),s.blur(),s.parent().removeClass("md-input-focused"),!d){d=!0;var p={};for(var T in f)t.hasOwnProperty(T)&&!angular.isUndefined(t[T])&&(p[T]=t[T]);p.currentDate=t.currentDate,p.showTodaysDate=S;var l={controller:C,controllerAs:"picker",locals:{options:p},openFrom:s,closeTo:s,parent:angular.element(document.body),bindToController:!0,clickOutsideToClose:p.clickOutsideToClose||!1,disableParentScroll:p.disableParentScroll||!1,hasBackdrop:p.hasBackdrop===void 0?!0:p.hasBackdrop,skipHide:!0,multiple:!0};p.templateUrl?l.templateUrl=p.templateUrl:l.template=H,i.show(l).then(function(m){c!==void 0&&m.utcOffset(c,!0),t.currentDate=m&&!m._isUTC?m.toDate():m,e.$setValidity("format",!0),e.$setViewValue(t.currentDate),e.$setDirty(),d=!1,o(t.currentDate).isSame(p.currentDate)||n(t.ngChange,0),s.parent().removeClass("md-input-focused")},function(){d=!1,s.parent().removeClass("md-input-focused")})}}if(t.editInput||(t.showIcon?s.on("click",v):s.on("focus",v)),t.showIcon){s.addClass("dtp-no-msclear dtp-input");var b='',y="";(t.showClear===void 0||t.showClear)&&(y="✕'),s.after(a(b+y)(t)),t.openCalendarDiag=function(D){v(D)},t.clear=function(){e.$setViewValue(null),t.currentDate=null,e.$render(),n(function(){t.ngChange(),s[0].focus()},0,!1)}}}}}]).factory("mdcDateTimeDialog",["$mdDialog","$q",function(i,n){var a={show:function(r){var t=n.defer();r.showTodaysDate!==void 0&&r.showTodaysDate!=="false"&&(r.showTodaysDate=o());var s={controller:C,controllerAs:"picker",locals:{options:r},parent:angular.element(document.body),bindToController:!0,clickOutsideToClose:r.clickOutsideToClose||!1,disableParentScroll:r.disableParentScroll||!1,skipHide:!0,multiple:!0,hasBackdrop:r.hasBackdrop===void 0?!0:r.hasBackdrop,targetEvent:r.targetEvent,openFrom:r.openFrom,closeTo:r.closeTo};return r.templateUrl?s.templateUrl=r.templateUrl:s.template=H,i.show(s).then(function(f){t.resolve(f&&!f._isUTC?f.toDate():f)},function(){t.reject()}),t.promise}};return a}]);var C=function(i,n){this.currentView=M.DATE,this._dialog=i,this._attachedEvents=[],this.VIEWS=M,this.params=angular.copy(n()),this.meridien="AM"};return C.$inject=["$mdDialog","mdcDefaultParams"],C.prototype={$onInit:function(){this.params=angular.extend(this.params,this.options),this.timeMode=this.params.time&&!this.params.date,this.dateMode=this.params.date,this.initDates(),this.start()},currentNearestMinute:function(){var i=this.params.minuteSteps;(i<1||i>59)&&(i=1);var n=this.currentDate||o(),a=i*Math.round(n.minute()/i);a>=60&&(a=60-i);var r;return this.params.seconds?(r=n.second(),r>=60&&(r=60-1)):r=0,o(n).minutes(a).seconds(r).millisecond(0)},initDates:function(){var i=this,n=function(a,r){var t=null;if(angular.isDefined(a)&&a!==null&&a!=="")if(angular.isString(a))typeof i.params.format<"u"&&i.params.format!==null?t=o(a,i.params.format).locale(i.params.lang):t=o(a).locale(i.params.lang);else if(typeof a=="number")t=o(a).locale(i.params.lang);else if(angular.isDate(a)){var s=a.getTime();t=o(s,"x").locale(i.params.lang)}else o.isMoment(a)&&(a.isValid()?t=a:t=r);else t=r;return t};this.currentDate=n(this.params.currentDate,o()),this.currentDate=this.currentNearestMinute(),this.minDate=n(this.params.minDate),this.maxDate=n(this.params.maxDate),this.disableDates=this.params.disableDates.map(function(a){return o(a).format("MMMM Do YYYY")}),this.selectDate(this.currentDate),this.weekDays=this.params.weekDays},initDate:function(){this.currentView=M.DATE},initHours:function(){this.currentView=M.HOUR},initMinutes:function(){this.currentView=M.MINUTE},initSeconds:function(){this.currentView=M.SECOND},isAfterMinDate:function(i,n,a){var r=!0;if(typeof this.minDate<"u"&&this.minDate!==null){var t=o(this.minDate),s=o(i);!n&&!a&&(t.hour(0),t.minute(0),s.hour(0),s.minute(0)),t.second(0),s.second(0),t.millisecond(0),s.millisecond(0),a||(s.minute(0),t.minute(0)),r=parseInt(s.format("X"))>=parseInt(t.format("X"))}return r},isBeforeMaxDate:function(i,n,a){var r=!0;if(typeof this.maxDate<"u"&&this.maxDate!==null){var t=o(this.maxDate),s=o(i);!n&&!a&&(t.hour(0),t.minute(0),s.hour(0),s.minute(0)),t.second(0),s.second(0),t.millisecond(0),s.millisecond(0),a||(s.minute(0),t.minute(0)),r=parseInt(s.format("X"))<=parseInt(t.format("X"))}return r},isInDisableDates:function(i){var n=i.format("MMMM Do YYYY");return!(this.disableDates.indexOf(n)>-1)},isWeekDay:function(i){return this.weekDays?i.isoWeekday()<=5:!0},selectDate:function(i){i&&(this.currentDate=o(i),this.isAfterMinDate(this.currentDate,!0,!0)||(this.currentDate=o(this.minDate)),this.isBeforeMaxDate(this.currentDate,!0,!0)||(this.currentDate=o(this.maxDate)),this.currentDate.locale(this.params.lang),this.calendarStart=o(this.currentDate),this.meridien=this.currentDate.hour()>=12?"PM":"AM")},isPM:function(){return this.meridien==="PM"},incrementMonth:function(i){(i===1&&this.isNextMonthVisible()||i===-1&&this.isPreviousMonthVisible())&&this.selectDate(this.currentDate.add(i,"month"))},incrementYear:function(i){(i===1&&this.isNextYearVisible()||i===-1&&this.isPreviousYearVisible())&&this.selectDate(this.currentDate.add(i,"year"))},openMenu:function(i,n){i.open(n)},monthsAvailable:function(){for(var i=[],n=o(this.currentDate),a=0;a<12;a++){var r=n.month(a);this.isAfterMinDate(r.endOf("month"))&&this.isBeforeMaxDate(r.startOf("month"))&&i.push(r.format("MMMM"))}return i},selectMonth:function(i){this.selectDate(this.currentDate.month(i))},yearsAvailable:function(){var i,n,a,r,t=[],s=this.currentDate.year();typeof this.minDate<"u"&&this.minDate!==null&&(i=o(this.minDate).year()),typeof this.maxDate<"u"&&this.maxDate!==null&&(n=o(this.maxDate).year()),n&&i?(a=n-i,r=i):i?(a=115,r=i):n?(a=30,r=n-a):(a=60,r=s-a/2);for(var f=0;f<=a;f++)t.push(r+f);return t},selectYear:function(i){this.selectDate(this.currentDate.year(i))},isPreviousMonthVisible:function(){return this.calendarStart&&this.isAfterMinDate(o(this.calendarStart).startOf("month"),!1,!1)},isNextMonthVisible:function(){return this.calendarStart&&this.isBeforeMaxDate(o(this.calendarStart).endOf("month"),!1,!1)},isPreviousYearVisible:function(){return this.calendarStart&&this.isAfterMinDate(o(this.calendarStart).startOf("year"),!1,!1)},isNextYearVisible:function(){return this.calendarStart&&this.isBeforeMaxDate(o(this.calendarStart).endOf("year"),!1,!1)},isHourAvailable:function(i){var n=o(this.currentDate);return this.params.shortTime?n.hour(this.convertHours(i)).minute(0).second(0):n.hour(i).minute(0).second(0),this.isAfterMinDate(n,!0,!1)&&this.isBeforeMaxDate(n,!0,!1)},isMinuteAvailable:function(i){var n=o(this.currentDate);n.minute(i).second(0);var a=this.params.minuteSteps;if(a>1&&5%a!==0){var r=n.minute(),t=a*Math.round(r/a);if(t>=60&&(t=60-a),t!==r)return!1}return this.isAfterMinDate(n,!0,!0)&&this.isBeforeMaxDate(n,!0,!0)},isSecondAvailable:function(i){return!0},start:function(){this.currentView=M.DATE,this.params.date?this.initDate():this.params.time&&this.initHours()},today:function(){var i=this.params.minuteSteps,n=o(),a=i*Math.round(n.minute()/i);a>=60&&(a=60-i);var r;this.params.seconds?(r=n.second(),r>=60&&(r=60-1)):r=0,this.selectDate(o(n).minutes(a).seconds(r).millisecond(0))},ok:function(){switch(this.currentView){case M.DATE:this.params.time===!0?this.initHours():this.hide(!0);break;case M.HOUR:this.params.minutes===!0?this.initMinutes():this.hide(!0);break;case M.MINUTE:this.params.seconds===!0?this.initSeconds():this.hide(!0);break;case M.SECOND:this.hide(!0);break}},cancel:function(){if(this.params.time)switch(this.currentView){case M.DATE:this.hide();break;case M.HOUR:this.params.date?this.initDate():this.hide();break;case M.MINUTE:this.initHours();break;case M.SECOND:this.initMinutes();break}else this.hide()},selectMonthBefore:function(){this.calendarStart.subtract(1,"months")},selectMonthAfter:function(){this.calendarStart.add(1,"months")},selectYearBefore:function(){this.calendarStart.subtract(1,"years")},selectYearAfter:function(){this.calendarStart.add(1,"years")},selectAM:function(){(this.isHourAvailable(0)||this.isHourAvailable(12))&&(this.currentDate.hour()>=12&&this.selectDate(this.currentDate.subtract(12,"hours")),this.isHourAvailable(this.currentDate.hour())||this.selectDate(this.currentDate.hour(this.minDate.hour())),this.isMinuteAvailable(this.currentDate.minute())||this.selectDate(this.currentDate.minute(this.minDate.minute())))},selectPM:function(){(this.isHourAvailable(12)||this.isHourAvailable(24))&&(this.currentDate.hour()<12&&this.selectDate(this.currentDate.add(12,"hours")),this.isHourAvailable(this.currentDate.hour())||this.selectDate(this.currentDate.hour(this.maxDate.hour())),this.isMinuteAvailable(this.currentDate.minute())||this.selectDate(this.currentDate.minute(this.maxDate.minute())))},convertHours:function(i){var n=i;return i<12&&this.isPM()&&(n+=12),n},hide:function(i){i?this._dialog.hide(this.currentDate):this._dialog.cancel()}},angular.module(N).directive("mdcDatetimePickerCalendar",[function(){for(var i=1920,n=new Date().getFullYear()+30,a=(n-i+1)*12,r=[],t=0;t6&&(u=0),c.push(u.toString());if(e.week=c,!d.maxDate&&!d.minDate)e.months=r;else{var v=d.minDate?s(d.minDate):0,b=d.maxDate?s(d.maxDate)+1:a;e.months=r.slice(v,b)}e.topIndex=s(d.currentDate)-e.months[0]},angular.version.major===1&&angular.version.minor<5&&this.$onInit(),e.getItemAtIndex=function(c){var u=(c+1)%12||12,v=i+Math.floor(c/12),b=o(d.currentDate).year(v).month(u);return S(b)},f.$watch(function(){return d.currentDate?d.currentDate.format("YYYY-MM"):""},function(c,u){if(c!=u){var v=o(c,"YYYY-MM"),b=d.minDate?s(d.minDate):0,y=s(v,b);e.topIndex!=y&&(e.topIndex=y)}});var S=function(c){var u={};if(c!==null){u.name=c.format("MMMM YYYY");var v=o(c).locale(d.params.lang).startOf("month").hour(c.hour()).minute(c.minute()),b=v.format("d");u.days=[];for(var y=v.date();y<=v.daysInMonth();y++){if(y===v.date()){var D=e.week.indexOf(b.toString());if(D>0)for(var p=0;p'}}]).directive("mdcDatetimePickerCalendarMonth",["$compile",function(i){var n=function(a,r){var t=angular.element(a[0].querySelector("tbody")),s=r.cal,f=r.month,e=[];f.days.forEach(function(d,S){e.push(""),d.forEach(function(c,u){if(e.push("| "),c)if(s.isInRange(c)){var v="month['days']["+S+"]["+u+"]";e.push(''),e.push(c.format("D")),e.push("")}else e.push(''),e.push(c.format("D")),e.push("");e.push(" | ")}),e.push("
")}),t.html(e.join("")),i(t)(r)};return{scope:{idx:"="},require:"^mdcDatetimePickerCalendar",restrict:"AE",template:'{{month.name}}
',link:function(a,r,t,s){a.cal=s,a.month=s.getItemAtIndex(parseInt(a.idx)),n(r,a),a.$watch(function(){return a.idx},function(f,e){f!=e&&(a.month=s.getItemAtIndex(parseInt(a.idx)),n(r,a))})}}}]),angular.module(N).directive("mdcDtpNoclick",function(){return{link:function(i,n){n.on("click",function(a){a.preventDefault()}),n.on("dragstart",function(a){a.preventDefault()})}}}),angular.module(N).directive("mdcDatetimePickerClock",["$timeout",function(i){var n='';return{restrict:"E",template:n,link:function(a,r,t){var s=t.mode==="minutes",f=t.mode==="seconds",e=a.picker,d=document.querySelector("md-dialog.dtp"),S=function(l,m){var h=0;if(l=l>=360?0:l,l!==0){var g=s||f?60:12;h=Math.round(g/360*l)}if(s){var I=e.params.minuteSteps;(I<1||I>59)&&(I=1);var w=I*Math.round(h/I);if(w>=60&&(w=60-I),!a.pointAvailable({value:h}))return;e.currentDate.minute(w)}else if(f){if(h>=60&&(h=0),!a.pointAvailable({value:h}))return;e.currentDate.second(h)}else{if(h===12&&(h=0),e.params.shortTime||(e.meridien=m>84?"AM":"PM"),e.isPM()&&(h+=12),!a.pointAvailable({value:h}))return;e.currentDate.hour(h)}},c="ontouchstart"in window,u={POINTER_DOWN:c?"touchstart":"mousedown",POINTER_UP:c?"touchend":"mouseup",POINTER_MOVE:c?"touchmove":"mousemove"},v=function(l){l.preventDefault();var m=l.currentTarget.closest("div"),h=m.getClientRects()[0];c&&(l=l.changedTouches[0]);var g=m.offsetWidth/2-(l.pageX-h.left),I=l.pageY-h.top-m.offsetHeight/2,w=Math.sqrt(Math.pow(g,2)+Math.pow(I,2)),x=Math.round(Math.atan2(g,I)*(180/Math.PI));i(function(){S(x+180,w)})};r.on(u.POINTER_DOWN,function(){r.on(u.POINTER_MOVE,v)}),r.on(u.POINTER_UP,function(){r.off(u.POINTER_MOVE)}),a.$on("$destroy",function(){r.off(u.POINTER_MOVE,v)});var b=function(){var l=angular.element(r[0].querySelector(".dtp-picker-clock")),m=angular.element(d.querySelector(".dtp-picker")),h=d.querySelector(".dtp-content").offsetWidth,g=parseInt(V(m,"paddingLeft").replace("px",""))||0,I=parseInt(V(m,"paddingRight").replace("px",""))||0,w=parseInt(V(m,"paddingTop").replace("px",""))||0,x=parseInt(V(l,"marginLeft").replace("px",""))||0,K=parseInt(V(l,"marginRight").replace("px",""))||0,Y=parseInt(V(l,"marginTop").replace("px",""))||0,$=h-(x+K+g+I);l.css("width",$+"px");for(var k=$/2,U=k/1.2,W=[],A=0;A<12;++A){var ee=U*Math.sin(Math.PI*2*(A/12)),te=U*Math.cos(Math.PI*2*(A/12)),B=k+ee+g/2-(g+x),j=k-te-Y/2-(w+Y),E={left:B,top:j,value:s||f?A*5:A,style:{"margin-left":B+"px","margin-top":j+"px"}};s||f?E.display=E.value<10?"0"+E.value:E.value:e.params.shortTime?E.display=A===0?12:A:E.display=A,W.push(E)}if(a.points=W,!e.params.shortTime&&!s&&!f){for(var R=[],z=k/1.8,O=12;O<24;++O){var ae=z*Math.sin(Math.PI*2*(O/12)),ie=z*Math.cos(Math.PI*2*(O/12)),q=k+ae+g/2-(g+x),Z=k-ie-Y/2-(w+Y);R.push({left:q,top:Z,value:O,display:O,style:{"margin-left":q+"px","margin-top":Z+"px"}})}a.points24=R}a.mode=t.mode,p(),l.css("height",$+"px");var L=r[0].querySelector(".dtp-clock-center"),re=L.offsetWidth/2||7.5,ne=L.offsetHeight/2||7.5,_=k/(e.params.shortTime?1.8:2.3),X=k/1.4,F=k;angular.element(r[0].querySelector(".dtp-hour-hand")).css({left:k+x*1.5+"px",height:_+"px",marginTop:k-_-g+"px"}).addClass(!s&&!f?"on":""),angular.element(r[0].querySelector(".dtp-minute-hand")).css({left:k+x*1.5+"px",height:X+"px",marginTop:k-X-g+"px"}).addClass(s?"on":""),angular.element(r[0].querySelector(".dtp-second-hand")).css({left:k+x*1.5+"px",height:F+"px",marginTop:k-F-g+"px"}).addClass(f?"on":""),angular.element(L).css({left:k+g+x-re+"px",marginTop:k-x/2-ne+"px"}),y()},y=function(){var l=e.currentNearestMinute(),m=l.hour(),h=l.minute(),g=l.second();D(angular.element(r[0].querySelector(".dtp-hour-hand")),30*m),D(angular.element(r[0].querySelector(".dtp-minute-hand")),6*h),D(angular.element(r[0].querySelector(".dtp-second-hand")),6*g)},D=function(l,m){angular.element(l).css({WebkitTransform:"rotate("+m+"deg)","-moz-transform":"rotate("+m+"deg)","-ms-transform":"rotate("+m+"deg)",transform:"rotate("+m+"deg)"})},p=function(){var l=e.currentNearestMinute(),m=e.params.shortTime?12:24;s?a.currentValue=l.minute():f?a.currentValue=l.second():a.currentValue=l.hour()%m};a.$watch(function(){var l=e.currentNearestMinute();return l?l.format("HH:mm:ss"):""},function(){p(),y()}),a.setTime=function(l){!s&&!f?(l===a.currentValue&&!e.params.autoOk&&e.ok(),e.params.shortTime?e.currentDate.hour(e.isPM()?l+12:l):(e.currentDate.hour(l),l>=12?e.meridien="PM":e.meridien="AM"),e.params.autoOk&&e.ok()):f?(l===a.currentValue&&e.ok(),e.currentDate.second(l)):(l===a.currentValue&&!e.params.seconds&&e.ok(),e.currentDate.minute(l),e.params.seconds?e.params.autoOk&&e.ok():e.currentDate.second(0))},a.pointAvailable=function(l){return s?e.isMinuteAvailable(l.value):f?e.isSecondAvailable(l.value):e.isHourAvailable(l.value)};var T=a.$watch(function(){return r[0].querySelectorAll("div").length},function(){b(),T()})}}}]),N}var J=window&&window.process&&window.process.type;typeof define=="function"&&define.amd?define(["moment"],P):typeof module<"u"&&module&&module.exports&&typeof require=="function"&&!J?module.exports=P(require("moment")):P((typeof global<"u"?global:window).moment)})();
2 | //# sourceMappingURL=angular-material-datetimepicker.min.js.map
3 |
--------------------------------------------------------------------------------
/dist/material-datetimepicker.min.css:
--------------------------------------------------------------------------------
1 | md-dialog.dtp{font-size:14px;line-height:1.42857143;color:#333;background-color:#fff;max-height:none;min-width:300px;width:300px}.noselect{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dtp *:focus{outline:none!important}.dtp table{border-spacing:0;border-collapse:collapse;width:100%}.dtp .table>tbody>tr>td,.dtp .table>tbody>tr>th,.dtp .table>tfoot>tr>td,.dtp .table>tfoot>tr>th,.dtp .table>thead>tr>td,.dtp .table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}.dtp,.dtp *{box-sizing:border-box!important}.dtp>.dtp-content{max-width:300px;max-height:500px}.dtp>.dtp-content>.dtp-date-view>header.dtp-header{background:#689F38;color:#fff;text-align:center}.dtp div.dtp-date,.dtp div.dtp-time{background:#8BC34A;text-align:center;color:#fff;padding:10px}.dtp div.dtp-date>div{padding:0;margin:0}.dtp div.dtp-actual-month{font-size:1.5em;cursor:pointer}md-menu-content.dtp-month-list{background-color:#fff}.dtp div.dtp-actual-num{font-size:2em;line-height:.9}.dtp div.dtp-actual-maxtime{font-size:2em;line-height:.9;color:#dcedc8}.dtp div.dtp-actual-maxtime span.selected{color:#fff}.dtp div.dtp-actual-year{font-size:1.6em;color:#dcedc8;cursor:pointer}md-menu-content.dtp-year-list{background-color:#fff}.dtp div.dtp-month-btn{font-size:1.4em;line-height:30px;cursor:pointer}.dtp div.dtp-month-btn-prev{text-align:right}.dtp div.dtp-month-btn-next{text-align:left}.dtp div.dtp-year-btn{font-size:1.4em;line-height:30px;cursor:pointer;color:#dcedc8}.dtp div.dtp-year-btn-prev{text-align:right}.dtp div.dtp-year-btn-next{text-align:left}.dtp div.dtp-picker{padding:10px 10px 0;text-align:center;overflow:hidden}.dtp div.dtp-picker-month,.dtp div.dtp-actual-time{font-size:1em;font-weight:500;text-align:center}.dtp div.dtp-actual-time.p60 span.selected{color:#689f38}.dtp .dtp-close{position:absolute;top:0;right:5px;font-size:16px}.dtp .dtp-close>a{color:#fff;text-decoration:none}.dtp .dtp-close>a>i{font-size:1em}.dtp table.dtp-picker-days{margin:0;min-height:260px}.dtp md-virtual-repeat-container.months{height:260px}.dtp table.dtp-picker-days,.dtp table.dtp-picker-days tr,.dtp table.dtp-picker-days tr>td{border:none}.dtp table.dtp-picker-days tr>td{font-size:12px;text-align:center;padding:0}.dtp table.dtp-picker-days tr>td>span.dtp-select-day{color:#bdbdbd!important}.dtp table.dtp-picker-days tr>td,.dtp table.dtp-picker-days tr>td>.dtp-select-day{width:36px;height:36px}.dtp table.dtp-picker-days tr>td>.dtp-select-day{display:inline-block}.dtp table.dtp-picker-days tr>td>.dtp-select-day,.dtp .dtp-picker-time>a{color:#212121;text-decoration:none;padding:10px;border-radius:50%!important}.dtp table.dtp-picker-days tr>td>a.selected{background:#8BC34A;color:#fff}.dtp table.dtp-picker-days tr>td>a.selected.hilite{padding:6px;font-size:16px;font-weight:500;background:#8BC34A;color:#fff}.dtp table.dtp-picker-days tr>td>a.hilite:not(.selected){padding:6px;font-size:16px;font-weight:500;color:#8bc34a}.dtp table.dtp-picker-days tr>td>a:hover:not(.selected){background:#dddddd}.dtp table.dtp-picker-days tr>th{color:#757575;text-align:center;font-weight:700;padding:2px 3px;width:38px;height:28px}.dtp .p10>a{color:#689f38;text-decoration:none}.dtp .p10{width:10%;display:inline-block}.dtp .p20{width:20%;display:inline-block}.dtp .p60{width:60%;display:inline-block}.dtp .p80{width:80%;display:inline-block}.dtp div.dtp-picker-datetime{padding-bottom:25px}.dtp span.dtp-actual-meridien{font-size:.6em}.dtp div.dtp-actual-meridien{height:20px}.dtp a.dtp-meridien-am,.dtp a.dtp-meridien-pm{position:relative;color:#212121;font-weight:500;padding:7px 5px;border-radius:50%!important;text-decoration:none;background:#eee;font-size:10px}.dtp .dtp-actual-meridien a.selected{background:#689F38;color:#fff}.dtp .dtp-picker-time>a{display:block;line-height:23px;padding:3px}.dtp .dtp-picker-time{position:absolute;width:30px;height:30px;font-size:1.1em;border-radius:50%;cursor:pointer;text-align:center!important}.dtp .dtp-picker-time>a.dtp-select-hour.selected{background:#689F38;color:#fff}.dtp .dtp-picker-time>a.dtp-select-hour.disabled,.dtp .dtp-picker-time>a.dtp-select-minute.disabled{color:#757575}.dtp .dtp-picker-time>a.dtp-select-minute.selected{background:#8BC34A;color:#fff}.dtp div.dtp-picker-clock{margin:10px 20px 0;padding:10px;border-radius:50%!important;background:#eee;direction:ltr;cursor:default}.dtp-clock-center{width:15px;height:15px;background:#757575;border-radius:50%;position:absolute;z-index:50}.dtp .dtp-hand,.dtp .dtp-hour-hand{position:absolute;width:4px;margin-left:-2px;background:#BDBDBD;-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0);-moz-transform-origin:bottom;-ms-transform-origin:bottom;-webkit-transform-origin:bottom;transform-origin:bottom;z-index:1}.dtp .dtp-minute-hand{width:2px;margin-left:-1px}.dtp .dtp-second-hand{width:1px;margin-left:-1px}.dtp .dtp-hand.on{background:#8BC34A}.dtp .dtp-buttons{padding-bottom:10px;text-align:right}.dtp.hidden,.dtp .hidden{display:none}.dtp .invisible{visibility:hidden}.dtp .left{float:left}.dtp .right{float:right}.dtp .clearfix{clear:both}.dtp .center{text-align:center}[dir=rtl] .dtp div.dtp-year-btn-next,[dir=rtl] .dtp div.dtp-month-btn-next,[dir=rtl] .dtp div.dtp-year-btn-prev,[dir=rtl] .dtp div.dtp-month-btn-prev{-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg)}.dtp-btn-today,.dtp-btn-ok,.dtp-btn-cancel{min-width:70px}.dtp-clear{position:absolute;top:0;right:-10px}.dtp-no-msclear::-ms-clear{display:none;width:0;height:0}.dtp-btn-calendar{position:absolute;top:-3px;left:-10px}.dtp-input{margin-left:30px;max-width:calc(100% - 30px)}
2 |
--------------------------------------------------------------------------------
/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/beenote/angular-material-datetimepicker/c8b97d36da220a0c5ed69896fb902fd80ed0760f/favicon.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Angular-Material DateTimePicker
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 |
Angular Material DateTimePicker
37 |
38 |
39 |
40 |
41 |
50 |
51 |
52 |
53 | INSTRUCTION
54 |
55 |
56 |
57 |
58 |
59 |
62 |
63 |
64 |
67 |
68 |
69 |
74 |
75 |
76 |
79 |
80 |
81 |
82 |
87 |
88 | {{timez.toDate()}}
89 |
90 |
91 |
94 |
95 |
96 |
101 |
102 |
103 |
106 |
107 |
108 |
109 |
114 |
115 | moment: {{timeutc._isAMomentObject}}
116 |
117 |
118 |
121 |
122 |
123 |
128 |
129 |
130 |
133 |
134 |
135 |
139 |
140 |
141 |
144 |
145 |
146 |
150 |
151 |
152 |
193 |
194 |
195 |
199 |
200 |
201 |
204 |
205 |
206 |
210 |
211 |
212 |
215 |
216 |
217 |
219 |
220 |
221 |
224 |
225 |
226 |
228 |
229 |
230 |
253 |
254 |
255 |
258 |
259 |
260 |
263 |
264 |
265 |
267 |
268 |
269 |
272 |
273 |
274 |
276 |
277 |
278 |
281 |
282 |
mdcDateTimeDialog Service
283 |
284 | Display Picker
285 |
286 |
Date: {{selectedDateTime|date:'medium'}}
287 |
288 |
289 |
' +
19 | ' ' +
26 | '
' +
27 | '
' +
28 | '
◄
' +
29 | '
' +
30 | ' {{picker.currentDate.format("MMM")|uppercase}}
' +
31 | ' ' +
32 | ' ' +
33 | ' {{itemMonth}}' +
34 | ' ' +
35 | ' ' +
36 | ' ' +
37 | '
►
' +
38 | '
' +
39 | '
{{picker.currentDate.format("DD")}}
' +
40 | '
' +
41 | '
◄
' +
42 | '
' +
43 | ' {{picker.currentDate.format("YYYY")}}
' +
44 | ' ' +
45 | ' ' +
46 | ' {{itemYear}}' +
47 | ' ' +
48 | ' ' +
49 | ' ' +
50 | '
►
' +
51 | '
'+
52 | '
' + //start time
53 | '
' +
54 | '
' +
55 | ' {{picker.currentNearestMinute().format(picker.params.shortTime ? "hh":"HH")}}:{{picker.currentNearestMinute().format("mm")}}'+
56 | ' {{picker.currentNearestMinute().format(picker.params.shortTime ? "hh":"HH")}}:{{picker.currentNearestMinute().format("mm")}}:{{picker.currentNearestMinute().format("ss")}}'+
57 | ' {{picker.currentDate.format("A")}}'+
58 | '
' +
59 | '
' +
60 | '
' +
61 | '
' +
62 | '
' +
63 | '
' +
64 | '
' +
67 | '
' +
68 | ' {{picker.currentNearestMinute().format(picker.params.shortTime?"hh":"HH")}}:{{picker.currentNearestMinute().format("mm")}}' +
69 | '
' +
70 | '
' +
71 | ' {{picker.currentNearestMinute().format(picker.params.shortTime?"hh":"HH")}}:{{picker.currentNearestMinute().format("mm")}}:{{picker.currentNearestMinute().format("ss")}}' +
72 | '
' +
73 | '
' +
76 | '
' +
77 | '
' +
78 | '
' +
79 | '
' +
80 | '
' +
81 | '
' +
82 | '
' +
83 | '
');
939 | weekDays.forEach(function (weekDay, j) {
940 | tbodyHtml.push('| ');
941 | if (weekDay) {
942 | if (calendar.isInRange(weekDay)) {
943 | //build a
944 | var scopeRef = 'month[\'days\'][' + i + '][' + j + ']';
945 |
946 | tbodyHtml.push('');
947 | tbodyHtml.push(weekDay.format('D'));
948 | tbodyHtml.push('');
949 | } else {
950 | tbodyHtml.push('');
951 | tbodyHtml.push(weekDay.format('D'));
952 | tbodyHtml.push('');
953 | }
954 | }
955 | tbodyHtml.push(' | ');
956 | });
957 | tbodyHtml.push('
');
958 | });
959 |
960 | tbody.html(tbodyHtml.join(''));
961 | $compile(tbody)(scope);
962 | };
963 |
964 | return {
965 | scope: {
966 | idx: '='
967 | },
968 | require: '^mdcDatetimePickerCalendar',
969 | restrict: 'AE',
970 | template:
971 | '{{month.name}}
' +
972 | '' +
973 | ' ' +
974 | ' ' +
975 | ' | {{cal.toDay(day)}} | ' +
976 | '
' +
977 | ' ' +
978 | ' ' +
979 | ' ' +
980 | '
',
981 | link: function (scope, element, attrs, calendar) {
982 | scope.cal = calendar;
983 | scope.month = calendar.getItemAtIndex(parseInt(scope.idx));
984 | buildCalendarContent(element, scope);
985 | scope.$watch(function () {
986 | return scope.idx;
987 | }, function (idx, oldIdx) {
988 | if (idx != oldIdx) {
989 | scope.month = calendar.getItemAtIndex(parseInt(scope.idx));
990 | buildCalendarContent(element, scope);
991 | }
992 | });
993 | }
994 | };
995 | }
996 | ])
997 | ;
998 |
999 | angular.module(moduleName)
1000 | .directive('mdcDtpNoclick', function () {
1001 | return {
1002 | link: function (scope, el) {
1003 | el.on('click', function (e) {
1004 | e.preventDefault();
1005 | });
1006 | el.on('dragstart', function (e) {
1007 | e.preventDefault();
1008 | });
1009 | }
1010 | };
1011 | });
1012 | angular.module(moduleName)
1013 | .directive('mdcDatetimePickerClock', ['$timeout',
1014 | function ($timeout) {
1015 |
1016 | var template =
1017 | ' ' +
1018 | '
' +
1022 | '
' +
1026 | '
' +
1027 | '
' +
1028 | '
' +
1029 | '
' +
1030 | '
';
1031 |
1032 | return {
1033 | restrict: 'E',
1034 | template: template,
1035 | link: function (scope, element, attrs) {
1036 | var minuteMode = attrs.mode === 'minutes';
1037 | var secondMode = attrs.mode === 'seconds';
1038 | var picker = scope.picker;
1039 | //banking on the fact that there will only be one at a time
1040 | var componentRoot = document.querySelector('md-dialog.dtp');
1041 |
1042 | var setTimeDegRay = function(deg, ray) {
1043 | var val = 0;
1044 | deg = deg >= 360 ? 0 : deg;
1045 | if (deg !== 0) {
1046 | var divider = minuteMode||secondMode ? 60 : 12;
1047 | val = Math.round(divider / 360 * deg);
1048 | }
1049 |
1050 | if (minuteMode) {
1051 | var nearestMin = picker.params.minuteSteps;
1052 | if (nearestMin < 1 || nearestMin > 59) nearestMin = 1;
1053 | var minutes = (nearestMin * Math.round(val / nearestMin));
1054 | if (minutes >= 60) minutes = 60 - nearestMin;
1055 | if (!scope.pointAvailable({value: val})) return;
1056 | picker.currentDate.minute(minutes);
1057 | } else if (!secondMode){
1058 | if (val === 12) val = 0;
1059 | if (!picker.params.shortTime) picker.meridien = ray > 84 ? 'AM' : 'PM';
1060 | if (picker.isPM()) val += 12;
1061 | if (!scope.pointAvailable({value: val})) return;
1062 | picker.currentDate.hour(val);
1063 | } else {
1064 | if (val >= 60) val = 0;
1065 | if (!scope.pointAvailable({value: val})) return;
1066 | picker.currentDate.second(val);
1067 | }
1068 | };
1069 |
1070 | var isTouchSupported = ('ontouchstart' in window) ? true : false,
1071 | EVENTS = {
1072 | POINTER_DOWN : isTouchSupported ? 'touchstart' : 'mousedown',
1073 | POINTER_UP : isTouchSupported ? 'touchend' : 'mouseup',
1074 | POINTER_MOVE : isTouchSupported ? 'touchmove' : 'mousemove'
1075 | };
1076 |
1077 | var onMoveEvent = function(e) {
1078 | e.preventDefault();
1079 |
1080 | var closestTarget = e.currentTarget.closest('div'),
1081 | clientRect = closestTarget.getClientRects()[0];
1082 |
1083 | if (isTouchSupported) e = e.changedTouches[0];
1084 |
1085 | var x = ((closestTarget.offsetWidth / 2) - (e.pageX - clientRect.left)),
1086 | y = ((e.pageY - clientRect.top) - (closestTarget.offsetHeight / 2));
1087 |
1088 | var ray = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)),
1089 | deg = Math.round((Math.atan2(x, y) * (180 / Math.PI)));
1090 |
1091 | $timeout(function() {
1092 | setTimeDegRay(deg+180, ray);
1093 | });
1094 | };
1095 |
1096 | element.on(EVENTS.POINTER_DOWN, function() {
1097 | element.on(EVENTS.POINTER_MOVE, onMoveEvent);
1098 | });
1099 |
1100 | element.on(EVENTS.POINTER_UP, function() {
1101 | element.off(EVENTS.POINTER_MOVE);
1102 | });
1103 |
1104 | scope.$on("$destroy", function() {
1105 | element.off(EVENTS.POINTER_MOVE, onMoveEvent);
1106 | });
1107 |
1108 | var exec = function () {
1109 | var clock = angular.element(element[0].querySelector('.dtp-picker-clock')),
1110 | pickerEl = angular.element(componentRoot.querySelector('.dtp-picker'));
1111 |
1112 | var w = componentRoot.querySelector('.dtp-content').offsetWidth;
1113 | var pL = parseInt(css(pickerEl, 'paddingLeft').replace('px', '')) || 0;
1114 | var pR = parseInt(css(pickerEl, 'paddingRight').replace('px', '')) || 0;
1115 | var pT = parseInt(css(pickerEl, 'paddingTop').replace('px', '')) || 0;
1116 | var mL = parseInt(css(clock, 'marginLeft').replace('px', '')) || 0;
1117 | var mR = parseInt(css(clock, 'marginRight').replace('px', '')) || 0;
1118 | var mT = parseInt(css(clock, 'marginTop').replace('px', '')) || 0;
1119 |
1120 | //set width
1121 | var clockWidth = (w - (mL + mR + pL + pR));
1122 | clock.css('width', (clockWidth) + 'px');
1123 |
1124 | var r = (clockWidth / 2);
1125 | var j = r / 1.2; // radius for low number
1126 |
1127 | var points = [];
1128 |
1129 | for (var h = 0; h < 12; ++h) {
1130 | var x = j * Math.sin(Math.PI * 2 * (h / 12));
1131 | var y = j * Math.cos(Math.PI * 2 * (h / 12));
1132 | var left = (r + x + pL / 2) - (pL + mL);
1133 | var top = (r - y - mT / 2) - (pT + mT);
1134 |
1135 | var hour = {
1136 | left: left,
1137 | top: top,
1138 | value: (minuteMode||secondMode ? (h * 5) : h), //5 for minute 60/12
1139 | style: {'margin-left': left + 'px', 'margin-top': top + 'px'}
1140 | };
1141 |
1142 | if (minuteMode || secondMode) {
1143 | hour.display = hour.value < 10 ? ('0' + hour.value) : hour.value;
1144 | } else {
1145 | if (picker.params.shortTime) {
1146 | hour.display = h === 0 ? 12 : h;
1147 | } else {
1148 | hour.display = h;
1149 | }
1150 | }
1151 |
1152 | points.push(hour);
1153 | }
1154 | scope.points = points;
1155 |
1156 | if (!picker.params.shortTime && !minuteMode && !secondMode) {
1157 | var points24 = [];
1158 |
1159 | var j24 = r / 1.8; // radius for high number
1160 | for (var h24 = 12; h24 < 24; ++h24) {
1161 | var x24 = j24 * Math.sin(Math.PI * 2 * (h24 / 12));
1162 | var y24 = j24 * Math.cos(Math.PI * 2 * (h24 / 12));
1163 | var left24 = (r + x24 + pL / 2) - (pL + mL);
1164 | var top24 = (r - y24 - mT / 2) - (pT + mT);
1165 |
1166 | points24.push({
1167 | left: left24,
1168 | top: top24,
1169 | value: h24,
1170 | display: h24,
1171 | style: {'margin-left': left24 + 'px', 'margin-top': top24 + 'px'}
1172 | });
1173 | }
1174 | scope.points24 = points24;
1175 | }
1176 |
1177 | scope.mode = attrs.mode;
1178 | setCurrentValue();
1179 | clock.css('height', clockWidth + 'px');
1180 |
1181 | var clockCenter = element[0].querySelector('.dtp-clock-center');
1182 | var centerWidth = (clockCenter.offsetWidth / 2) || 7.5;
1183 | var centerHeight = (clockCenter.offsetHeight / 2) || 7.5;
1184 | var _hL = r / (picker.params.shortTime ? 1.8 : 2.3);
1185 | var _mL = r / 1.4;
1186 | var _sL = r;
1187 |
1188 | angular.element(element[0].querySelector('.dtp-hour-hand')).css({
1189 | left: r + (mL * 1.5) + 'px',
1190 | height: _hL + 'px',
1191 | marginTop: (r - _hL - pL) + 'px'
1192 | }).addClass(!minuteMode && !secondMode ? 'on' : '');
1193 |
1194 | angular.element(element[0].querySelector('.dtp-minute-hand')).css({
1195 | left: r + (mL * 1.5) + 'px',
1196 | height: _mL + 'px',
1197 | marginTop: r - _mL - pL + 'px'
1198 | }).addClass(minuteMode ? 'on' : '');
1199 |
1200 | angular.element(element[0].querySelector('.dtp-second-hand')).css({
1201 | left: r + (mL * 1.5) + 'px',
1202 | height: _sL + 'px',
1203 | marginTop: r - _sL - pL + 'px'
1204 | }).addClass(secondMode ? 'on' : '');
1205 |
1206 | angular.element(clockCenter).css({
1207 | left: r + pL + mL - centerWidth + 'px',
1208 | marginTop: (r - (mL / 2)) - centerHeight + 'px'
1209 | });
1210 | animateHands();
1211 | };
1212 |
1213 | var animateHands = function () {
1214 | var _date = picker.currentNearestMinute();
1215 | var h = _date.hour(), m = _date.minute(), s = _date.second();
1216 |
1217 | rotateElement(angular.element(element[0].querySelector('.dtp-hour-hand')), 30 * h);
1218 | rotateElement(angular.element(element[0].querySelector('.dtp-minute-hand')), 6 * m);
1219 | rotateElement(angular.element(element[0].querySelector('.dtp-second-hand')), 6 * s);
1220 | };
1221 |
1222 | var rotateElement = function (el, deg) {
1223 | angular.element(el).css({
1224 | WebkitTransform: 'rotate(' + deg + 'deg)',
1225 | '-moz-transform': 'rotate(' + deg + 'deg)',
1226 | '-ms-transform': 'rotate(' + deg + 'deg)',
1227 | 'transform': 'rotate(' + deg + 'deg)'
1228 | });
1229 | };
1230 |
1231 |
1232 | var setCurrentValue = function () {
1233 | var date = picker.currentNearestMinute();
1234 | var nbH = picker.params.shortTime ? 12 : 24;
1235 | if (minuteMode) scope.currentValue = date.minute();
1236 | else if (secondMode) scope.currentValue = date.second();
1237 | else scope.currentValue = date.hour() % nbH;
1238 | };
1239 |
1240 | scope.$watch(function () {
1241 | var tmp = picker.currentNearestMinute();
1242 | return tmp ? tmp.format('HH:mm:ss') : '';
1243 | }, function () {
1244 | setCurrentValue();
1245 | animateHands();
1246 | });
1247 |
1248 | scope.setTime = function (val) {
1249 | if (!minuteMode && !secondMode) {
1250 | if (val === scope.currentValue && !picker.params.autoOk) picker.ok(); // double click
1251 |
1252 | if (picker.params.shortTime) {
1253 | picker.currentDate.hour(picker.isPM() ? (val + 12) : val);
1254 | } else {
1255 | picker.currentDate.hour(val);
1256 | if (val >= 12) picker.meridien = 'PM';
1257 | else picker.meridien = 'AM';
1258 | }
1259 |
1260 | if (picker.params.autoOk) picker.ok(); // single click
1261 | } else if (!secondMode) {
1262 | if (val === scope.currentValue && !picker.params.seconds) picker.ok(); // double click
1263 |
1264 | picker.currentDate.minute(val);
1265 | if (!picker.params.seconds) {
1266 | picker.currentDate.second(0);
1267 | } else if (picker.params.autoOk) picker.ok(); // single click
1268 | } else {
1269 | if (val === scope.currentValue) picker.ok(); // double click
1270 | picker.currentDate.second(val);
1271 | }
1272 | };
1273 |
1274 | scope.pointAvailable = function (point) {
1275 | if (minuteMode) return picker.isMinuteAvailable(point.value);
1276 | else if (secondMode) return picker.isSecondAvailable(point.value);
1277 | else return picker.isHourAvailable(point.value);
1278 | };
1279 |
1280 | var unWatcher = scope.$watch(function () {
1281 | return element[0].querySelectorAll('div').length;
1282 | }, function () {
1283 | exec();
1284 | unWatcher();
1285 | });
1286 | }
1287 | };
1288 | }]);
1289 | return moduleName;
1290 | }
1291 |
1292 | var isElectron = window && window.process && window.process.type;
1293 | if (typeof define === 'function' && define.amd) {
1294 | define(['moment'], ngMaterialDatePicker);
1295 | } else if (typeof module !== 'undefined' && module && module.exports && (typeof require === 'function') && !isElectron) {
1296 | module.exports = ngMaterialDatePicker(require('moment'));
1297 | } else {
1298 | ngMaterialDatePicker((typeof global !== 'undefined' ? global : window).moment);
1299 | }
1300 | })();
1301 |
--------------------------------------------------------------------------------
/js/demo.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | 'use strict';
3 | angular.module('mdDatetimePickerDemo', [
4 | 'ngMaterialDatePicker',
5 | 'pascalprecht.translate',
6 | 'ngMessages'
7 | ])
8 | .config(function($translateProvider) {
9 | $translateProvider.translations('en', {
10 | CANCEL: "Cancel",
11 | TODAY: "Today",
12 | INSTRUCTION: "You can double click or double tap to make selections.",
13 | });
14 | $translateProvider.translations('fr', {
15 | CANCEL: "Annuler",
16 | TODAY: "Aujourd'hui",
17 | INSTRUCTION: "Vous pouvez double-cliquer ou appuyer deux fois pour effectuer des sélections.",
18 | });
19 | $translateProvider.preferredLanguage('en');
20 | $translateProvider.useSanitizeValueStrategy('sceParameters');
21 | })
22 | .run(['$templateCache', function($templateCache) {
23 | $templateCache.put(
24 | 'customTemplate.html',
25 | '' +
26 | ' ' +
27 | ' ' +
28 | '
' +
29 | '
' +
30 | ' {{picker.currentNearestMinute().format(picker.params.shortTime ? "hh":"HH")}}:{{picker.currentNearestMinute().format("mm")}}'+
31 | ' {{picker.currentNearestMinute().format(picker.params.shortTime ? "hh":"HH")}}:{{picker.currentNearestMinute().format("mm")}}:{{picker.currentNearestMinute().format("ss")}}'+
32 | ' {{picker.currentDate.format("A")}}'+
33 | '
' +
34 | '
' +
35 | '
' +
36 | '
' +
37 | '
' +
38 | '
' +
39 | '
' +
42 | '
' +
43 | ' {{picker.currentNearestMinute().format(picker.params.shortTime ? "hh":"HH")}}:{{picker.currentNearestMinute().format("mm")}}' +
44 | '
' +
45 | '
' +
46 | ' {{picker.currentNearestMinute().format(picker.params.shortTime ? "hh":"HH")}}:{{picker.currentNearestMinute().format("mm")}}:{{picker.currentNearestMinute().format("ss")}}' +
47 | '
' +
48 | '
' +
51 | '
' +
52 | '
' +
53 | '
' +
54 | '
' +
55 | '
' +
56 | '
' +
57 | '
' +
58 | '
{{title}}
{{sourceCode}}
',
134 | scope: {},
135 | link: function (scope, element, attrs) {
136 | var tmp = angular.element((element.parent()[0]).querySelector(attrs.target || 'md-input-container'));
137 | if (tmp.length) {
138 | scope.title = attrs.title || "Source Code";
139 | var sourceCode = tmp[0].outerHTML
140 | .replace('ng-model=', 'angularModel=')
141 | .replace('ng-model-options=', 'angularModelOptions=')
142 | .replace('ng-click=', 'angularClick=')
143 | .replace(/ng-[a-z\-]+/g, '')
144 | .replace(/ +/g, ' ')
145 | .replace('angularModel=', 'ng-model=')
146 | .replace('angularModelOptions=', 'ng-model-options=')
147 | .replace('angularClick=', 'ng-click=');
148 |
149 | scope.sourceCode = style_html(sourceCode, {
150 | 'indent_size': 2,
151 | 'indent_char': ' ',
152 | 'max_char': 78,
153 | 'brace_style': 'expand'
154 | });
155 | }
156 | }
157 | };
158 | })
159 | .directive('hljs', function ($timeout) {
160 | return {
161 | link: function (scope, element) {
162 | $timeout(function () {
163 | hljs.highlightBlock(element[0].querySelector('code'));
164 | }, 100);
165 | }
166 | };
167 | })
168 | ;
169 | })();
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ng-material-datetimepicker",
3 | "description": "A datetime picker for AngularJS Material",
4 | "version": "1.20.0",
5 | "keywords": [
6 | "css",
7 | "js",
8 | "mobile-first",
9 | "angular",
10 | "material",
11 | "angular-material",
12 | "responsive",
13 | "front-end",
14 | "web"
15 | ],
16 | "homepage": "https://beenote.github.io/angular-material-datetimepicker/",
17 | "main": "js/angular-material-datetimepicker.js",
18 | "scripts": {
19 | "build": "yarn node build",
20 | "start": "web-dev-server --watch --open"
21 | },
22 | "dependencies": {
23 | "angular": "^1.8.3",
24 | "angular-animate": "^1.8.3",
25 | "angular-aria": "^1.8.3",
26 | "angular-material": "^1.2.5",
27 | "angular-messages": "^1.8.3",
28 | "moment": "^2.29.4"
29 | },
30 | "repository": {
31 | "type": "git",
32 | "url": "https://github.com/beenote/angular-material-datetimepicker"
33 | },
34 | "devDependencies": {
35 | "@web/dev-server": "^0.1.35",
36 | "esbuild": "^0.15.16"
37 | },
38 | "packageManager": "yarn@3.3.0"
39 | }
40 |
--------------------------------------------------------------------------------