Using jquery datetimepicker with ember easyForm

Here is how to use a jquery datetimepickerwith easyForm:

// http://xdsoft.net/jqplugins/datetimepicker/
Ember.EasyForm.TextField
		.reopen({
			didInsertElement : function() {
				var wrapperElement = this.$().closest('div.input');
				if (wrapperElement.hasClass('datetime')) {
					this.renderDatetime();
					return;
				}

				if (wrapperElement.hasClass('date')) {
					this.renderDate();
					return;
				}
			},
			renderDatetime : function() {
				this.renderDatePicker({
					format : 'd.m.Y H:i',
					lang : 'de',
					step : 15,
					closeOnWithoutClick : true
				});
			},
			renderDate : function() {
				this.renderDatePicker({
					format : 'd.m.Y',
					lang : 'de',
					timepicker : false
				});
			},
			renderDatePicker : function(pickerOptions) {
				var picker = this.$().datetimepicker(pickerOptions);
				
				this.$().unbind().blur(function() {
					picker.datetimepicker('hide');
				});
				
				var pickButton = $(
						'<span class="input-group-btn"><button id="image_button" class="btn btn-default" type="button"><span class="glyphicon glyphicon-calendar"></button></span></span>')
						.click(function() {
							picker.datetimepicker('show');
						});
				
				var inputGroupDiv = $('<div class="input-group"/>');
				var containerDiv = this.$().closest('div');
				inputGroupDiv.append(pickButton);
				containerDiv.find('input').appendTo(inputGroupDiv);
				containerDiv.prepend(inputGroupDiv);
			}
		});

In the following sample datewidget is a freely chosen undefined placeholder, that is converted to text by ember-easyForm. Otherwise it would be converted to a native HTML-Date-Field, if a date is recognized. You could use "sausage", but i like datewidget better :-) Use in Template:

<!-- datetime -->
{{input reportstart as="datewidget" class="datetime"}} 

<!-- date only -->
{{input reportstart as="datewidget" class="date"}}

May this implementiation inspire the authors of easyform to provide a real solution for this problem :-)