KnockoutJS date binding issue, using jQuery datepicker

Question

I am having a problem with binding a date to the object on my viewmodel. I have a date that I am getting from the server.

 var viewModel = {
    profile : ko.mapping.fromJS(initialData),

I am binding the property to a text box.

<input data-bind="datepicker: profile.Birthdate()" />

I am using the custom binding that I found on this here: http://jsfiddle.net/rniemeyer/NAgNV/

    ko.bindingHandlers.datepicker = { 
init: function(element, valueAccessor, allBindingsAccessor) { 
    //initialize datepicker with some optional options 
    var options = allBindingsAccessor().datepickerOptions || {}; 
    $(element).datepicker(options); 

    //handle the field changing 
    ko.utils.registerEventHandler(element, "change", function () { 
        var observable = valueAccessor(); 
        ko.observable($(element).datepicker("getDate")); 
        $(element).blur();
    }); 

    //handle disposal (if KO removes by the template binding) 
    ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
        $(element).datepicker("destroy"); 
    }); 

}, 
update: function(element, valueAccessor) { 
    var value = ko.utils.unwrapObservable(valueAccessor()), 
        current = $(element).datepicker("getDate"); 

    if(value != null)
    {
        if(value.toString()[0] = "/")
            value = new Date(parseInt(value.toString().substr(6)));
    } 

    if (value - current !== 0) { 
        $(element).datepicker("setDate", value); 
    }
}

};

I added the if(value.toString()[0] = "/") for formatting of the date to display in the textbox.

This seems to work well except when I try to save the object add send it back the the server. I added an alert to verify and before I send the object to the server there is no change in the date.

 save : function(){
        alert(this.profile.Birthdate);

Any ideas on what I am doing wrong?

Thank you for your time.

Rafay · Accepted Answer · 2012-03-04 05:44:21Z

0

On the following line, make sure you're using an == instead if just one = in your conditional statement.

if(value.toString()[0] == "/")

edited Mar 4, 2012 at 5:44

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

answered Mar 4, 2012 at 5:38

KodeKreachor

8,91210 gold badges50 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Eric Over a year ago

thank you for your reply. I made the change but the value is still not changed. I think it has to do with the binding. Even worse when I do the following. data: ko.toJSON(this) the business object has null as the Birthdate

KodeKreachor Over a year ago

Could you maybe throw what you have up on jsfiddle? I added a save method to this example and the updated values comes through: jsfiddle.net/NAgNV/188

Eric Over a year ago

Thank you again! I looked at that and it does work...but does not work for my solution. I think that the issue may be related to the fact that my business object is coming to knockout via a C# business object. Have you done this using a C# business object and the mapping plugin? Is it a trick to getting that to work?

KodeKreachor Over a year ago

That's exactly what we're doing, we're in the process creating a product configuration platform where the client side is entirely implemented using knockout view models populated from C# objects serialized to json. Would you be able to provide an example of the json that you're sending into ko's mapping utility? Not to worry, we'll get this figured out :)

Eric Over a year ago

what is the best way to print the Json object and send it to you?

|

t0nyh0 · Accepted Answer · 2012-03-06 21:05:04Z

0

I suspect it has to do with the way you're binding it. When you do profile.Birthdate() you are passing in the actual value and not the observable. So please try changing

<input data-bind="datepicker: profile.Birthdate()" />

To

<input data-bind="datepicker: profile.Birthdate" />

answered Mar 6, 2012 at 21:05

t0nyh0

6803 silver badges9 bronze badges

Collectives™ on Stack Overflow

KnockoutJS date binding issue, using jQuery datepicker

2 Answers 2

11 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related