Knockout Help

[Hostilio]

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

[Hostilio]

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

[Harikrishnan P]

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.