beautiful_scaffold 0.3.3 → 0.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. data/CHANGELOG +9 -0
  2. data/beautiful_scaffold.gemspec +1 -1
  3. data/lib/generators/beautiful_devisecancan_generator.rb +2 -2
  4. data/lib/generators/beautiful_locale_generator.rb +32 -19
  5. data/lib/generators/beautiful_scaffold_common_methods.rb +7 -4
  6. data/lib/generators/beautiful_scaffold_generator.rb +6 -2
  7. data/lib/generators/templates/app/assets/javascripts/application-bs.js +2 -8
  8. data/lib/generators/templates/app/assets/javascripts/beautiful_scaffold.js +11 -11
  9. data/lib/generators/templates/app/assets/javascripts/bootstrap-colorpicker.js +1 -1
  10. data/lib/generators/templates/app/assets/javascripts/bootstrap-datepicker.js +799 -799
  11. data/lib/generators/templates/app/assets/javascripts/bootstrap-datetimepicker-for-beautiful-scaffold.js +17 -15
  12. data/lib/generators/templates/app/assets/javascripts/bootstrap-timepicker.js +135 -131
  13. data/lib/generators/templates/app/assets/javascripts/bootstrap-wysihtml5.js +24 -16
  14. data/lib/generators/templates/app/assets/javascripts/fixed_menu.js +7 -7
  15. data/lib/generators/templates/app/assets/stylesheets/application-bs.css +1 -0
  16. data/lib/generators/templates/app/assets/stylesheets/beautiful-scaffold.css.scss +4 -4
  17. data/lib/generators/templates/app/assets/stylesheets/bootstrap_and_overrides.css.less +40 -0
  18. data/lib/generators/templates/app/assets/stylesheets/colorpicker.css +1 -1
  19. data/lib/generators/templates/app/assets/stylesheets/datepicker.css +2 -2
  20. data/lib/generators/templates/app/assets/stylesheets/timepicker.css +3 -6
  21. data/lib/generators/templates/app/controllers/base.rb +4 -4
  22. data/lib/generators/templates/app/controllers/master_base.rb +1 -1
  23. data/lib/generators/templates/app/helpers/beautiful_helper.rb +31 -33
  24. data/lib/generators/templates/app/initializers/link_renderer.rb +5 -5
  25. data/lib/generators/templates/app/views/_form.html.erb +2 -2
  26. data/lib/generators/templates/app/views/_form_habtm_tag.html.erb +2 -2
  27. data/lib/generators/templates/app/views/_mass_inserting.html.erb +6 -6
  28. data/lib/generators/templates/app/views/_modal_columns.html.erb +19 -15
  29. data/lib/generators/templates/app/views/edit.html.erb +1 -1
  30. data/lib/generators/templates/app/views/index.html.erb +36 -34
  31. data/lib/generators/templates/app/views/layout.html.erb +19 -28
  32. data/lib/generators/templates/app/views/new.html.erb +1 -1
  33. data/lib/generators/templates/app/views/partials/_forget_password.html.erb +21 -17
  34. data/lib/generators/templates/app/views/partials/_form_field.html.erb +40 -58
  35. data/lib/generators/templates/app/views/partials/_index_batch.html.erb +2 -2
  36. data/lib/generators/templates/app/views/partials/_index_column.html.erb +17 -17
  37. data/lib/generators/templates/app/views/partials/_index_header.html.erb +7 -7
  38. data/lib/generators/templates/app/views/partials/_index_search.html.erb +1 -1
  39. data/lib/generators/templates/app/views/partials/_index_search_default_fields.html.erb +1 -1
  40. data/lib/generators/templates/app/views/partials/_register_form.html.erb +38 -34
  41. data/lib/generators/templates/app/views/partials/_sign_in_form.html.erb +4 -4
  42. data/lib/generators/templates/app/views/show.html.erb +2 -2
  43. metadata +40 -20
@@ -1,13 +1,13 @@
1
1
  function datetimepicker_init(){
2
-
3
- $('.dpicker').livequery(function(){
2
+ $(document).on('click', '.dpicker', function(e){
3
+ e.stopPropagation();
4
+ e.stopImmediatePropagation();
4
5
  $(this).datepicker({ format : 'dd/mm/yyyy', language : $('html').attr("lang") }).on('changeDate', function(ev){
5
- idday = '#' + $('#' + ev.currentTarget.id).data('id') + '_3i';
6
- idmonth = '#' + $('#' + ev.currentTarget.id).data('id') + '_2i';
7
- idyear = '#' + $('#' + ev.currentTarget.id).data('id') + '_1i';
8
- $(idday).val(ev.date.getDate());
9
- $(idmonth).val(ev.date.getMonth()+1);
10
- $(idyear).val(ev.date.getFullYear());
6
+ var eltid = ev.currentTarget.id;
7
+ //eltid = $('#' + ev.currentTarget.id).data('id');
8
+ $('#' + eltid + '_3i').val(ev.date.getDate()); // Day
9
+ $('#' + eltid + '_2i').val(ev.date.getMonth()+1); // Month
10
+ $('#' + eltid + '_1i').val(ev.date.getFullYear()); // Year
11
11
  });
12
12
  $(this).change(function(){
13
13
  if( !$(this).val() ){
@@ -17,8 +17,10 @@ function datetimepicker_init(){
17
17
  $(id + '_1i').val("");
18
18
  }
19
19
  });
20
+ $(this).trigger('focus');
21
+ $(this).trigger('select');
20
22
  });
21
- $('.add-on').live('click', function(){
23
+ $(document).on('click', '.input-group-addon', function(){
22
24
  try{
23
25
  dpick = $(this).parent().find('.dpicker');
24
26
  dpick.trigger('focus');
@@ -26,13 +28,13 @@ function datetimepicker_init(){
26
28
  }catch (e){
27
29
  }
28
30
  });
29
- $('.tpicker').livequery(function(){
31
+ $(document).on('click', '.tpicker', function(){
30
32
  $(this).timepicker({ template: 'modal', showMeridian: false, minuteStep: 1, defaultTime: false, showInputs: false, disableFocus: true }).on('change', function(ev){
31
33
  tpickerdate = new Date("01/01/1970 " + ev.currentTarget.value);
32
- idhour = '#' + $('#' + ev.currentTarget.id).data('id') + '_4i';
33
- idmin = '#' + $('#' + ev.currentTarget.id).data('id') + '_5i';
34
- $(idhour).val(tpickerdate.getHours());
35
- $(idmin).val(tpickerdate.getMinutes());
34
+ var eltid = ev.currentTarget.id;
35
+ //eltid = $('#' + ev.currentTarget.id).data('id');
36
+ $('#' + eltid + '_4i').val(tpickerdate.getHours()); // Hour
37
+ $('#' + eltid + '_5i').val(tpickerdate.getMinutes()); // Min
36
38
  });
37
39
  $(this).change(function(){
38
40
  if( !$(this).val() ){
@@ -41,6 +43,6 @@ function datetimepicker_init(){
41
43
  $(id + '_5i').val("");
42
44
  }
43
45
  });
46
+ $(this).click();
44
47
  });
45
-
46
48
  }
@@ -55,8 +55,8 @@
55
55
  constructor: Timepicker
56
56
 
57
57
  , init: function () {
58
- if (this.$element.parent().hasClass('input-append')) {
59
- this.$element.parent('.input-append').find('.add-on').on('click', $.proxy(this.showWidget, this));
58
+ if (this.$element.parent().hasClass('input-group')) {
59
+ this.$element.parent('.input-group').find('.input-group-addon').on('click', $.proxy(this.showWidget, this));
60
60
  this.$element.on('click', $.proxy(this.showWidget, this));
61
61
  this.$element.on({
62
62
  focus: $.proxy(this.highlightUnit, this),
@@ -81,10 +81,10 @@
81
81
  });
82
82
  }
83
83
  }
84
-
84
+
85
85
 
86
86
  this.$widget = $(this.getTemplate()).appendTo('body');
87
-
87
+
88
88
  this.$widget.on('click', $.proxy(this.widgetClick, this));
89
89
 
90
90
  if (this.showInputs) {
@@ -93,7 +93,7 @@
93
93
  keypress: $.proxy(this.widgetKeypress, this),
94
94
  change: $.proxy(this.updateFromWidgetInputs, this)
95
95
  });
96
- }
96
+ }
97
97
 
98
98
  this.setDefaultTime(this.defaultTime);
99
99
  }
@@ -141,7 +141,7 @@
141
141
 
142
142
  , hideWidget: function(){
143
143
  this.$element.trigger('hide');
144
-
144
+
145
145
  if (this.template === 'modal') {
146
146
  this.$widget.modal('hide');
147
147
  } else {
@@ -168,11 +168,11 @@
168
168
  switch (e.keyCode) {
169
169
  case 9: //tab
170
170
  if (this.showMeridian) {
171
- if (input == 'meridian') {
171
+ if (input == 'meridian') {
172
172
  this.hideWidget();
173
173
  }
174
174
  } else {
175
- if (this.showSeconds) {
175
+ if (this.showSeconds) {
176
176
  if (input == 'second') {
177
177
  this.hideWidget();
178
178
  }
@@ -182,44 +182,44 @@
182
182
  }
183
183
  }
184
184
  }
185
- break;
185
+ break;
186
186
  case 27: // escape
187
187
  this.hideWidget();
188
- break;
188
+ break;
189
189
  case 38: // up arrow
190
190
  switch (input) {
191
191
  case 'hour':
192
192
  this.incrementHour();
193
- break;
193
+ break;
194
194
  case 'minute':
195
195
  this.incrementMinute();
196
- break;
196
+ break;
197
197
  case 'second':
198
198
  this.incrementSecond();
199
- break;
199
+ break;
200
200
  case 'meridian':
201
201
  this.toggleMeridian();
202
- break;
202
+ break;
203
203
  }
204
204
  this.update();
205
- break;
205
+ break;
206
206
  case 40: // down arrow
207
207
  switch (input) {
208
208
  case 'hour':
209
209
  this.decrementHour();
210
- break;
210
+ break;
211
211
  case 'minute':
212
212
  this.decrementMinute();
213
- break;
213
+ break;
214
214
  case 'second':
215
215
  this.decrementSecond();
216
- break;
216
+ break;
217
217
  case 'meridian':
218
218
  this.toggleMeridian();
219
- break;
219
+ break;
220
220
  }
221
221
  this.update();
222
- break;
222
+ break;
223
223
  }
224
224
  }
225
225
 
@@ -227,7 +227,7 @@
227
227
  var input = this.$element.get(0);
228
228
  switch (e.keyCode) {
229
229
  case 0: //input
230
- break;
230
+ break;
231
231
  case 9: //tab
232
232
  this.updateFromElementVal();
233
233
  if (this.showMeridian) {
@@ -236,7 +236,7 @@
236
236
  this.highlightNextUnit();
237
237
  }
238
238
  } else {
239
- if (this.showSeconds) {
239
+ if (this.showSeconds) {
240
240
  if (this.highlightedUnit != 'second') {
241
241
  e.preventDefault();
242
242
  this.highlightNextUnit();
@@ -248,54 +248,54 @@
248
248
  }
249
249
  }
250
250
  }
251
- break;
251
+ break;
252
252
  case 27: // escape
253
253
  this.updateFromElementVal();
254
- break;
254
+ break;
255
255
  case 37: // left arrow
256
256
  this.updateFromElementVal();
257
257
  this.highlightPrevUnit();
258
- break;
258
+ break;
259
259
  case 38: // up arrow
260
260
  switch (this.highlightedUnit) {
261
261
  case 'hour':
262
262
  this.incrementHour();
263
- break;
263
+ break;
264
264
  case 'minute':
265
265
  this.incrementMinute();
266
- break;
266
+ break;
267
267
  case 'second':
268
268
  this.incrementSecond();
269
- break;
269
+ break;
270
270
  case 'meridian':
271
271
  this.toggleMeridian();
272
- break;
272
+ break;
273
273
  }
274
274
  this.updateElement();
275
- break;
275
+ break;
276
276
  case 39: // right arrow
277
277
  this.updateFromElementVal();
278
278
  this.highlightNextUnit();
279
- break;
279
+ break;
280
280
  case 40: // down arrow
281
281
  switch (this.highlightedUnit) {
282
282
  case 'hour':
283
283
  this.decrementHour();
284
- break;
284
+ break;
285
285
  case 'minute':
286
286
  this.decrementMinute();
287
- break;
287
+ break;
288
288
  case 'second':
289
289
  this.decrementSecond();
290
- break;
290
+ break;
291
291
  case 'meridian':
292
292
  this.toggleMeridian();
293
- break;
293
+ break;
294
294
  }
295
295
  this.updateElement();
296
- break;
296
+ break;
297
297
  }
298
-
298
+
299
299
  if (e.keyCode !== 0 && e.keyCode !== 8 && e.keyCode !== 9 && e.keyCode !== 46) {
300
300
  e.preventDefault();
301
301
  }
@@ -317,7 +317,7 @@
317
317
 
318
318
  if (isNaN(this.hour)) {
319
319
  this.hour = 1;
320
- }
320
+ }
321
321
  if (isNaN(this.minute)) {
322
322
  this.minute = 0;
323
323
  }
@@ -333,7 +333,7 @@
333
333
  this.meridian = 'AM';
334
334
  } else if (this.meridian == 'pm' || this.meridian == 'p') {
335
335
  this.meridian = 'PM';
336
- }
336
+ }
337
337
 
338
338
  if (this.meridian != 'AM' && this.meridian != 'PM') {
339
339
  this.meridian = 'AM';
@@ -389,7 +389,7 @@
389
389
  }
390
390
  meridian = "PM";
391
391
  } else {
392
- meridian = "AM";
392
+ meridian = "AM";
393
393
  }
394
394
  }
395
395
  this.hour = hours;
@@ -439,16 +439,16 @@
439
439
  switch (this.highlightedUnit) {
440
440
  case 'hour':
441
441
  this.highlightHour();
442
- break;
442
+ break;
443
443
  case 'minute':
444
444
  this.highlightMinute();
445
- break;
445
+ break;
446
446
  case 'second':
447
447
  this.highlightSecond();
448
- break;
448
+ break;
449
449
  case 'meridian':
450
450
  this.highlightMeridian();
451
- break;
451
+ break;
452
452
  }
453
453
 
454
454
  }
@@ -484,14 +484,14 @@
484
484
  }
485
485
 
486
486
  , updateFromWidgetInputs: function () {
487
- var time = $('input.bootstrap-timepicker-hour').val() + ':' +
488
- $('input.bootstrap-timepicker-minute').val() +
489
- (this.showSeconds ?
490
- ':' + $('input.bootstrap-timepicker-second').val()
491
- : '') +
492
- (this.showMeridian ?
493
- ' ' + $('input.bootstrap-timepicker-meridian').val()
494
- : '');
487
+ var time = $('input.bootstrap-timepicker-hour').val() + ':' +
488
+ $('input.bootstrap-timepicker-minute').val() +
489
+ (this.showSeconds ?
490
+ ':' + $('input.bootstrap-timepicker-second').val()
491
+ : '') +
492
+ (this.showMeridian ?
493
+ ' ' + $('input.bootstrap-timepicker-meridian').val()
494
+ : '');
495
495
 
496
496
  this.setValues(time);
497
497
  }
@@ -536,20 +536,20 @@
536
536
  switch (this.highlightedUnit) {
537
537
  case 'hour':
538
538
  this.highlightMinute();
539
- break;
539
+ break;
540
540
  case 'minute':
541
541
  if (this.showSeconds) {
542
542
  this.highlightSecond();
543
543
  } else {
544
544
  this.highlightMeridian();
545
545
  }
546
- break;
546
+ break;
547
547
  case 'second':
548
548
  this.highlightMeridian();
549
- break;
549
+ break;
550
550
  case 'meridian':
551
551
  this.highlightHour();
552
- break;
552
+ break;
553
553
  }
554
554
  }
555
555
 
@@ -557,20 +557,20 @@
557
557
  switch (this.highlightedUnit) {
558
558
  case 'hour':
559
559
  this.highlightMeridian();
560
- break;
560
+ break;
561
561
  case 'minute':
562
562
  this.highlightHour();
563
- break;
563
+ break;
564
564
  case 'second':
565
565
  this.highlightMinute();
566
- break;
566
+ break;
567
567
  case 'meridian':
568
568
  if (this.showSeconds) {
569
569
  this.highlightSecond();
570
570
  } else {
571
571
  this.highlightMinute();
572
572
  }
573
- break;
573
+ break;
574
574
  }
575
575
  }
576
576
 
@@ -616,7 +616,7 @@
616
616
  if (this.showMeridian) {
617
617
  if (this.hour === 1) {
618
618
  return this.hour = 12;
619
- }
619
+ }
620
620
  else if (this.hour === 12) {
621
621
  this.toggleMeridian();
622
622
  }
@@ -689,70 +689,74 @@
689
689
  var meridianTemplate = '<span class="bootstrap-timepicker-meridian"></span>';
690
690
  }
691
691
  var templateContent = '<table class="'+ (this.showSeconds ? 'show-seconds' : '') +' '+ (this.showMeridian ? 'show-meridian' : '') +'">'+
692
- '<tr>'+
693
- '<td><a href="#" data-action="incrementHour"><i class="icon-chevron-up"></i></a></td>'+
694
- '<td class="separator">&nbsp;</td>'+
695
- '<td><a href="#" data-action="incrementMinute"><i class="icon-chevron-up"></i></a></td>'+
696
- (this.showSeconds ?
697
- '<td class="separator">&nbsp;</td>'+
698
- '<td><a href="#" data-action="incrementSecond"><i class="icon-chevron-up"></i></a></td>'
699
- : '') +
700
- (this.showMeridian ?
701
- '<td class="separator">&nbsp;</td>'+
702
- '<td class="meridian-column"><a href="#" data-action="toggleMeridian"><i class="icon-chevron-up"></i></a></td>'
703
- : '') +
704
- '</tr>'+
705
- '<tr>'+
706
- '<td>'+ hourTemplate +'</td> '+
707
- '<td class="separator">:</td>'+
708
- '<td>'+ minuteTemplate +'</td> '+
709
- (this.showSeconds ?
710
- '<td class="separator">:</td>'+
711
- '<td>'+ secondTemplate +'</td>'
712
- : '') +
713
- (this.showMeridian ?
714
- '<td class="separator">&nbsp;</td>'+
715
- '<td>'+ meridianTemplate +'</td>'
716
- : '') +
717
- '</tr>'+
718
- '<tr>'+
719
- '<td><a href="#" data-action="decrementHour"><i class="icon-chevron-down"></i></a></td>'+
720
- '<td class="separator"></td>'+
721
- '<td><a href="#" data-action="decrementMinute"><i class="icon-chevron-down"></i></a></td>'+
722
- (this.showSeconds ?
723
- '<td class="separator">&nbsp;</td>'+
724
- '<td><a href="#" data-action="decrementSecond"><i class="icon-chevron-down"></i></a></td>'
725
- : '') +
726
- (this.showMeridian ?
727
- '<td class="separator">&nbsp;</td>'+
728
- '<td><a href="#" data-action="toggleMeridian"><i class="icon-chevron-down"></i></a></td>'
729
- : '') +
730
- '</tr>'+
731
- '</table>';
692
+ '<tr>'+
693
+ '<td><a href="#" data-action="incrementHour"><i class="fa fa-chevron-up"></i></a></td>'+
694
+ '<td class="separator">&nbsp;</td>'+
695
+ '<td><a href="#" data-action="incrementMinute"><i class="fa fa-chevron-up"></i></a></td>'+
696
+ (this.showSeconds ?
697
+ '<td class="separator">&nbsp;</td>'+
698
+ '<td><a href="#" data-action="incrementSecond"><i class="fa fa-chevron-up"></i></a></td>'
699
+ : '') +
700
+ (this.showMeridian ?
701
+ '<td class="separator">&nbsp;</td>'+
702
+ '<td class="meridian-column"><a href="#" data-action="toggleMeridian"><i class="fa fa-chevron-up"></i></a></td>'
703
+ : '') +
704
+ '</tr>'+
705
+ '<tr>'+
706
+ '<td>'+ hourTemplate +'</td> '+
707
+ '<td class="separator">:</td>'+
708
+ '<td>'+ minuteTemplate +'</td> '+
709
+ (this.showSeconds ?
710
+ '<td class="separator">:</td>'+
711
+ '<td>'+ secondTemplate +'</td>'
712
+ : '') +
713
+ (this.showMeridian ?
714
+ '<td class="separator">&nbsp;</td>'+
715
+ '<td>'+ meridianTemplate +'</td>'
716
+ : '') +
717
+ '</tr>'+
718
+ '<tr>'+
719
+ '<td><a href="#" data-action="decrementHour"><i class="fa fa-chevron-down"></i></a></td>'+
720
+ '<td class="separator"></td>'+
721
+ '<td><a href="#" data-action="decrementMinute"><i class="fa fa-chevron-down"></i></a></td>'+
722
+ (this.showSeconds ?
723
+ '<td class="separator">&nbsp;</td>'+
724
+ '<td><a href="#" data-action="decrementSecond"><i class="fa fa-chevron-down"></i></a></td>'
725
+ : '') +
726
+ (this.showMeridian ?
727
+ '<td class="separator">&nbsp;</td>'+
728
+ '<td><a href="#" data-action="toggleMeridian"><i class="fa fa-chevron-down"></i></a></td>'
729
+ : '') +
730
+ '</tr>'+
731
+ '</table>';
732
732
 
733
733
  var template;
734
734
  switch(this.options.template) {
735
735
  case 'modal':
736
- template = '<div class="bootstrap-timepicker modal hide fade in" style="top: 30%; margin-top: 0; width: 200px; margin-left: -100px;" data-backdrop="'+ (this.modalBackdrop ? 'true' : 'false') +'">'+
737
- '<div class="modal-header">'+
738
- '<a href="#" class="close" data-dismiss="modal">×</a>'+
739
- '<h3>Pick a Time</h3>'+
740
- '</div>'+
741
- '<div class="modal-content">'+
742
- templateContent +
743
- '</div>'+
744
- '<div class="modal-footer">'+
745
- '<a href="#" class="btn btn-primary" data-dismiss="modal">Ok</a>'+
746
- '</div>'+
747
- '</div>';
748
-
749
- break;
736
+ template = '<div class="bootstrap-timepicker modal fade in" style="top: 30%; margin-top: 0;" data-backdrop="'+ (this.modalBackdrop ? 'true' : 'false') +'">'+
737
+ '<div class="modal-dialog">'+
738
+ '<div class="modal-content">'+
739
+ '<div class="modal-header">'+
740
+ '<a href="#" class="close" data-dismiss="modal">×</a>'+
741
+ '<h3>Pick a Time</h3>'+
742
+ '</div>'+
743
+ '<div class="modal-content">'+
744
+ templateContent +
745
+ '</div>'+
746
+ '<div class="modal-footer">'+
747
+ '<a href="#" class="btn btn-primary" data-dismiss="modal">Ok</a>'+
748
+ '</div>'+
749
+ '</div>'+
750
+ '</div>'+
751
+ '</div>';
752
+
753
+ break;
750
754
  case 'dropdown':
751
755
  template = '<div class="bootstrap-timepicker dropdown-menu">'+
752
- templateContent +
753
- '</div>';
754
- break;
755
-
756
+ templateContent +
757
+ '</div>';
758
+ break;
759
+
756
760
  }
757
761
  return template;
758
762
  }
@@ -765,8 +769,8 @@
765
769
  $.fn.timepicker = function (option) {
766
770
  return this.each(function () {
767
771
  var $this = $(this)
768
- , data = $this.data('timepicker')
769
- , options = typeof option == 'object' && option;
772
+ , data = $this.data('timepicker')
773
+ , options = typeof option == 'object' && option;
770
774
  if (!data) {
771
775
  $this.data('timepicker', (data = new Timepicker(this, options)));
772
776
  }
@@ -777,16 +781,16 @@
777
781
  }
778
782
 
779
783
  $.fn.timepicker.defaults = {
780
- minuteStep: 15
781
- , secondStep: 15
782
- , disableFocus: false
783
- , defaultTime: 'current'
784
- , showSeconds: false
785
- , showInputs: true
786
- , showMeridian: true
787
- , template: 'dropdown'
788
- , modalBackdrop: false
789
- , templates: {} // set custom templates
784
+ minuteStep: 15
785
+ , secondStep: 15
786
+ , disableFocus: false
787
+ , defaultTime: 'current'
788
+ , showSeconds: false
789
+ , showInputs: true
790
+ , showMeridian: true
791
+ , template: 'dropdown'
792
+ , modalBackdrop: false
793
+ , templates: {} // set custom templates
790
794
  }
791
795
 
792
796
  $.fn.timepicker.Constructor = Timepicker