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