BorisMoore / jsviews

Interactive data-driven views, MVVM and MVP, built on top of JsRender templates
http://www.jsviews.com/#jsviews
MIT License
855 stars 130 forks source link

Datepicker value resets when convertBack in use #344

Closed naxellar closed 8 years ago

naxellar commented 8 years ago

I am using datepicker control from Sample tag controls.

{^{datepicker date _dateFormat='dd/mm/y'
   convert='toDateString' convertBack='toWcfDate'}}
   <input type="text" value=""/>
{{/datepicker}}

toDateString converter returns date in datepicker format, toWcfDate converter gets datepicker format and returns ASP.NET format (e.g. /Date(1198908717056-0700)/).

When user interact with datepicker, model stores correct value but datepicker control is assigning ASP.NET format value that brings to resetting date to default.

See JSFiddle demo

I found that here datepicker is assigning raw model value and this method are calling after user chose date in picker.

// jsviews-jqueryui-widgets.js
...
setValue: function (value) {
  if (value !== undefined && value !== this.value) {
    this.value = value;
    this.linkedElem.datepicker("setDate", value);
  }
},
...

Did I do something wrong or it is a bug? Do you support Sample tag controls or not? Thank you.

BorisMoore commented 8 years ago

Hi, Yes that is a bug. The fix is to change the following line

https://github.com/BorisMoore/jsviews.com/blob/gh-pages/download/sample-tag-controls/jsviews-jqueryui-widgets.js#L285

to

tag.setValue(tag.cvtArgs()[0]);

I'll include that in the next update.

Thanks for catching this!

Boris

naxellar commented 8 years ago

It works. Thank you for you help.

BorisMoore commented 8 years ago

In fact there is another small change. The onAfterLink function should be like this:

  onAfterLink: function(tagCtx) {
    var tag = this;
    tag.baseApply(arguments);
    tag.setValue(tag.cvtArgs()[0]);
    if (tag.linkedElem[0].tagName !== "INPUT") {
      // This datepicker is not using an input (e.g. using a div) - so set to inline-block
      tag.linkedElem.css("display", "inline-block");
    } else {
      tag.tagCtx.props.trigger = false;
    }
  }
BorisMoore commented 8 years ago

I am thinking to add a sample showing use of converters with the {{datepicker}} tag control. Would you be OK if I use your code for the converters, using moment.js, within the sample?

naxellar commented 8 years ago

It is OK, welcome to use where you want.

BorisMoore commented 8 years ago

Good, thanks, I'll do that... :)

BorisMoore commented 8 years ago

This has been fixed in release v0.9.80 Sample added here http://www.jsviews.com/#samples/tag-controls/datepicker/with-converters Closing this issue...