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.
Unfortunately, activation email could not send to your email. Please try again.

Knockout Help

Thread ID:

Created:

Updated:

Platform:

Replies:

115993 Mar 12,2014 10:53 AM Mar 13,2014 10:18 AM JavaScript 2
loading
Tags: ejDatePicker
Hostilio
Asked On March 12, 2014 10:53 AM

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
Replied On March 12, 2014 01:31 PM

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 [Syncfusion]
Replied On March 13, 2014 10:18 AM

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.


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;