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.

score 0 · Answer 1 · edited Mar 04 '12 at 05:44

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 04 '12 at 05:44

Rafay

30,950
5
68
101

answered Mar 04 '12 at 05:38

KodeKreachor

8,852
10
47
64

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 – Eric Mar 04 '12 at 14:37
Could you maybe throw what you have up on jsfiddle? I added a save method to this example and the updated values comes through: http://jsfiddle.net/NAgNV/188/ – KodeKreachor Mar 04 '12 at 15:07
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? – Eric Mar 04 '12 at 16:03
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 :) – KodeKreachor Mar 04 '12 at 16:25
what is the best way to print the Json object and send it to you? – Eric Mar 04 '12 at 17:08
var initialData = {"ProfileId":"606c4b23-2a22-4ff1-8714-33c3e2da8478","ImageLocation":null,"Username":"wellblack","City":"Chicago","ZipCode":null,"Gender":null,"Birthdate":"\/Date(319093200000)\/","StateAbbrev":"IL"}; – Eric Mar 04 '12 at 17:11
Here's an updated example with your object: http://jsfiddle.net/KodeKreachor/fAGes/4/ – KodeKreachor Mar 04 '12 at 17:38
Your example makes sense, but it does not use the date format that I supplied. I think that ASP.Net MVC is putting it in that format. Is there a way that I could avoid this format all together. – Eric Mar 04 '12 at 23:53
You have options, but the easiest would be to parse your datetime string into a date (inside the 'create' function on the BirthDate mapping object) using a regular expression. Here's a couple links that can help you with that: http://stackoverflow.com/questions/1016847/converting-net-datetime-to-json and http://stackoverflow.com/questions/8843441/how-to-convert-net-datetime-to-json Please let me know if this takes care of your issues and gets you up and running. Thanks! – KodeKreachor Mar 05 '12 at 00:14
Thank you for all of your comments. I have found that upon hitting the save, the value of the date has not changed. Therefore the binding is messed up. Thank you though – Eric Mar 11 '12 at 15:42
Hey Eric, I came across this post, would this help in converting your date to the format you need? http://stackoverflow.com/questions/8735617/handling-dates-with-asp-net-mvc-and-knockoutjs – KodeKreachor Mar 26 '12 at 23:48

score 0 · Answer 2 · answered Mar 06 '12 at 21:05

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" />

KnockoutJS date binding issue, using jQuery datepicker

2 Answers2