Update bootstrap-datetimepicker.js solution for ember.js binding problem

[mido18]

problem: when change the date via mouse the textfield does not notified for change event which make it problem when using ember.js solution: adding this block of code to hide function which make ember.js binding notified to changes

SORRY for my bad English :smile:

[apmorton]

:+1: Thanks for this, applied it manually and ember.js now works with this :smile:

[mido18]

@Juvenal1228 :+1: you are welcome :smiley:

[kdiogenes]

Thanks for this @mido18. With your patch I was able to resolve the issue totally in emberjs side (ps.: I'm using ember-easyForm and Font Awesome).

I created a view to represent my input with this:

App.DateTimePicker = Ember.EasyForm.Input.extend
    init: ->
        @_super();
        @classNameBindings.push('showError:' + @get('wrapperConfig.fieldErrorClass'));
        Ember.defineProperty(this, 'showError', Ember.computed.and('canShowValidationError', 'formForModel.errors.' + this.property + '.firstObject'));
        if !@isBlock
            @set('templateName', "datetimepicker");

    didInsertElement: ->
        element = @
        @$().datetimepicker
            language: 'pt-BR'
            format: 'dd/MM/yyyy hh:mm'
        .on('hide', ->
            element.$('input').change()
        )
        # show font awesome arrows             
        $('i.icon-chevron-up').toggleClass('icon-chevron-up fa fa-arrow-up')
        $('i.icon-chevron-down').toggleClass('icon-chevron-up fa fa-arrow-down')

Ember.Handlebars.registerHelper('datetimepicker', (property, options) ->
    options.hash.inputOptions = Ember.copy(options.hash);
    options.hash.property = property;
    options.hash.isBlock = !!(options.fn);
    return Ember.Handlebars.helpers.view.call(@, App.DateTimePicker, options);
)

And this is my template:

= hb "label-field propertyBinding='view.property' textBinding='view.label'"
%div{ bind: { class: ":input-append :date unbound view.wrapperConfig.controlsWrapperClass" } }
    = hb "input-field propertyBinding='view.property' inputOptionsBinding='view.inputOptionsValues'"
    %span.add-on
        %i{ :'data-date-icon' => 'fa fa-calendar', :'data-time-icon' => 'fa fa-clock-o' }
= hb "if view.showError" do
    %span.text-error= hb "error-field propertyBinding='view.property'"

[steakchaser]

I use this control within Ember like this:

views\application_view.js.coffee

EmberApp.DateTimePickerField = Em.View.extend
  templateName: 'datetimepicker'
  didInsertElement: ->
    self = this
    log "self in DateTimePickerField", self
    log "valueBinding", self.valueBinding
    onChangeDate = (ev) ->
      self.set "value", moment.utc(ev.date).format("YYYY-MM-DD hh:mm A")
    @$('.datetimepicker').datetimepicker({language: 'en', pick12HourFormat: true, pickSeconds: false}).on "changeDate", onChangeDate
    # This hopefully sets the default value to what is currently in the valueBinding
    @$('.datetimepicker').data("datetimepicker").setLocalDate @get("value")
    # This is the kind of thing we used to do in the non Ember version
    # @$('.datetimepicker').data("datetimepicker").setLocalDate Date.parse("2013-12-11 05:48:31 -0800")
    # This can be used to trigger the change event
    # @$('.datetimepicker').trigger('changeDate')

templates\datetimepicker.handlebars

<div class="input-append date datetimepicker">
  {{!log view.date_string}}
  <input size="50" type="text" data-format="yyyy-MM-dd HH:mm PP">
  <span class="add-on">
    <i data-time-icon="fa fa-clock-o" data-date-icon="fa fa-calendar" class="fa fa-calendar"></i>
  </span>
</div>

templates\any_template_that_uses_a_datetimepicker.handlerbars

{{view EmberApp.DateTimePickerField  valueBinding='datetime_var_from_controller_model_etc'}}