Date picker drives me crazy

CanJS
1

Hi all,

I am aware of the online docu. Nevertheless I am not able to get the date picker to run together with an input field.

Unfortunately I can’t show the issue using my own JS BIN as, adding
can.canViewCallbacks.tag(“date-pick”, function(el, tagData){
$(el).datepicker();
});
to the JS BIn always results in: can.canViewCallbacks undefined. I am using the can all file and put a “can.” in front to “canViewCallbacks”. No idea whats wrong here.

So what I got to work in the JS Bin definitely is incorrect but at least shows the input field and the date picker.

Anyways, I get this to work locally using
import canViewCallbacks from “can-view-callbacks”;

So my html looks like:

The JS:
canViewCallbacks.tag(“date-pick”, function(el, tagData){
$(el).datepicker();
});

The date picker shows up but not the input field of course.

Using

and
canViewCallbacks.attr(“datepicker”, function( el, attrData ) {
$(el).datepicker();
});
does not show anything at all.

Could someone pleas help me out with a simple example?

Cheers,

Nada

2

It’s can.viewCallbacks (maybe can.view.callbacks) not can.canViewCallbacks

3

Ok now I can show the issue on the JS BIN.

can.view.callbacks.tag and can.view.callbacks.attr both get executed but with “tag” nothing is shown so I try to switch to can.view.callbacks.tag.
Here the input field is shown, and the datepicker is active but binding {(value)}=“a.date” of the input to the viewmodel does not work.

Any tips

4

Looks like I found at least one error. I forgot to put a “$” in front of “value” in the line below.
At least the .attr version in JS BIN now works.
<p>Date: <input datepicker="abc" type="text" id="datepicker" {($value)}="a.date"></p>

Any tips how to do this using the .tag variant?

5

Any tips how to do this using the .tag variant?

Does jQuery’s datepicker widget require an input? If yes, then you’d want to add one within the custom element and then call $().datepicker on that.

6

Hi Justin,

I updated the code to a New JS BIN. The two methods I tried to add the input within the .tag variant don’t work, though?
Unfortunately the documentation only shows what I tried in the original JS BIN without adding a custom element.

I also played with the subtemplate option but following the example from the docs just gives:
scope.computeData is not a function

No idea where this is coming from as I am not actively calling computeData.