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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Knockout Help

Thread ID:





115993 Mar 12,2014 02:53 PM UTC Mar 13,2014 02:18 PM UTC JavaScript 2
Tags: ejDatePicker
Asked On March 12, 2014 02:53 PM UTC


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


JavaScript Code Attached.

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

Attachment: PlanificacionCreateEdit_50086236.zip

Replied On 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.


<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);
                buttonText: "Today",
                cssClass: "gradient-azure",
                dateFormat: "dd/MM/yyyy",
                waterMarkText: "Select Date",
                select: function (args) {
                    var value = valueAccessor();
            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 () {

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 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.





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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon