We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Knockout Help

Hello,

I have tried several ways without success.

I have normal textboxes mapped to knockout just fine but since i want to edit it as well and two fields are dates and other two are times i am looking forward to transform them on a ejDatePicker and ejTimepicker

Please your help and advice since i haven't managed to accomplish the goal.

HTML partial Code:

<div data-bind='with: planificacion'>

<input class="form-control" data-bind="value: FECHA_INICIO " id="fecha_inicio" placeholder="FECHA_INICIO" />

<input class="form-control" data-bind='value: HORA_INICIO' id="hora_inicio" placeholder="HORA_INICIO" />

<input class="form-control" data-bind="value: moment(FECHA_FIN()).format('DD/MM/YYYY')" id="fecha_fin" placeholder="FECHA_FIN" />

<input class="form-control" data-bind='value: HORA_FIN' id="hora_fin" placeholder="HORA_FIN" />

</div>

JavaScript Code Attached.

HORA_INICIO, HORA_FIN must be timepickers and FECHA_INICIO, FECHA_FIN must bu datepicker






Attachment: PlanificacionCreateEdit_50086236.zip

2 Replies

HO Hostilio March 12, 2014 05:31 PM UTC

Finally it Works at least with the DatePicker, hoping it is going to be the same with timepicker.

I change HTML for FECHA_INICIO, FECHA_FIN to:

<input class="form-control" readonly="true" data-bind="toDatePicker: FECHA_INICIO" id="fecha_inicio" placeholder="FECHA_INICIO" />

And I add this to the JavaScript file

    ko.bindingHandlers.toDatePicker = {
        init: function (element, valueAccessor, allBindingsAccessor) {
            var el = $(element);
            el.ejDatePicker({
                buttonText: "Today",
                cssClass: "gradient-azure",
                dateFormat: "dd/MM/yyyy",
                waterMarkText: "Select Date",
                select: function (args) {
                    var value = valueAccessor();
                    value(args.value);
                }
            });
            var value = ko.utils.unwrapObservable(valueAccessor());
            var m = moment(value, ["YYYY-MM-DD", "DD/MM/YYYY"]);
            if (!m.isValid()) {
                value = moment().format('DD/MM/YYYY');
            }
            m = moment(value, ["YYYY-MM-DD", "DD/MM/YYYY"]);
            //Seteo el valor en el datepicker
            el.ejDatePicker("option", "value", moment(value, ["YYYY-MM-DD", "DD/MM/YYYY"]).format('DD/MM/YYYY'));
            //Seteo el valor en el Elemento del knockout
            var observable = valueAccessor();
            observable(moment(value, ["YYYY-MM-DD", "DD/MM/YYYY"]).format('DD/MM/YYYY'));
            //handle disposal (if KO removes by the template binding)
            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                $(element).datepicker("destroy");
            });
        },
    }

How do i get to the solution, well with the help of the forums, the knockout syncfusion ebook and knockout help




HP Harikrishnan P Syncfusion Team March 13, 2014 02:18 PM UTC

Hi Hostilio,

Currently we have not provided two way binding support for Knockout. We are glad to inform you that in our upcoming release we will provide two way binding support of Knockout for our controls.

Kindly get back to us if you have further queries.

 

Thanks/Regards,

HariKrishnan.


Loader.
Live Chat Icon For mobile
Up arrow icon