noob at knockout : binding does not work with datepicker

[Tom Vandermaesen]

Dear kind people

i have a simple view with edit patient functionality

html

                           <input id="birthDate" class="form-control datepicker" data-bind="value: (editPatient.birthDate() !== null) ? moment(editPatient.birthDate()).format('DD/MM/YYYY') : '' " />

vm

var patient = function (data) {

    if (data !== undefined) {

 this.birthDate = ko.observable(data.BirthDate);

} else {

this.birthDate = ko.observable(null);

}

when i change the date this does not get logged by KO since the post data is still the old value...

[Gunnar Liljas]

Since you're binding to a function, KO has no idea how to write the value back. The best option is to use a custom datepicker binding.

2014-08-13 9:58 GMT+02:00 Tom Vandermaesen <tom.vand...@gmail.com>:

The 2 quotes after the : are 2 single quotes ... this doesnt get shown here very well

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Tom Vandermaesen]

SUCH A QUICK REPLY very cool, thanks 

[Tom Vandermaesen]

i found this

http://stackoverflow.com/questions/6612705/jquery-ui-datepicker-change-event-not-caught-by-knockoutjs

but i want to work with a nullable datepicker so the user can fill in nothing as well, i hope this is possible with this

i also have no idea where to put this binding, in the viewmodel.jks itself ? or a seperate custombinds.js file ?

all help is welcome 

[Tom Vandermaesen]

now the date gets displayed in wrong format i guess but its totally wrong:

i get a 02/12/2019 for this date in de DB : 1968-10-21 00:00:00.0000000

and my code is this

html:

<input id="birthDate" class="form-control datepicker" data-bind='datepicker: editPatient.birthDate() , datepickerOptions: { dateFormat: "dd/mm/yy" }' /> 

kobindings.js :

ko.bindingHandlers.datepicker = {

    init: function (element, valueAccessor, allBindingsAccessor) {

        //initialize datepicker with some optional options

        var options = allBindingsAccessor().datepickerOptions || {},

            $el = $(element);

        $el.datepicker(options);

        //handle the field changing

        ko.utils.registerEventHandler(element, "change", function () {

            var observable = valueAccessor();

            observable($el.datepicker("getDate"));

        });

        //handle disposal (if KO removes by the template binding)

        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {

            $el.datepicker("destroy");

        });

    },

    update: function (element, valueAccessor) {

        var value = ko.utils.unwrapObservable(valueAccessor()),

            $el = $(element);

        //handle date data coming via json from Microsoft

        if (String(value).indexOf('/Date(') == 0) {

            value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));

        }

        var current = $el.datepicker("getDate");

        if (value - current !== 0) {

            $el.datepicker("setDate", value);

        }

    }

};

@section scripts {

    <script src="~/MyScripts/patientVm.js"></script>

    <script>

        $(function () {

            ko.applyBindings(new editPatientVm(@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(this.Model))));

        });

    </script>

the ko binding script gets loaded in the master view

..... jquery scripts......

 <script src="~/MyScripts/kobindings.js"></script>

    

    @RenderSection("scripts", required: false)

    <script src="~/MyScripts/general.js"></script>

[Tom Vandermaesen]

when i look at this

http://jsfiddle.net/rniemeyer/AkBUv/

why does the date get minus 2 hours in the json result below ?! 

[Gunnar Liljas]

The date is internally represented (and returned from the datepicker) as a UTC date (hence the "Z" suffix), which seems to be 2 hours before your time zone.

/G

--