jQWidgets Forums
jQuery UI Widgets › Forums › Editors › DateTimeInput › jqxDateTimeInput in version 2.8 is not usable with knockout
This topic contains 3 replies, has 3 voices, and was last updated by Bentechsoft 11 years, 11 months ago.
-
Author
-
Hello.
After updating to jqWidgets 2.8 I’ve found that:
1. It is not possible to localize jqxDateTimeInput when it is initialized with knockoutJS binding.
Example:
jqxDateTimeInput: { culture: ‘de’, width: 395, height: 32, value: DateField }The reason is that “value” binding is applied before “culture”, and due to behavior described in (2) $.global.culture is broken by the time when culture is applied.
2. jqxCalendar breaks the currently selected $.global.culture.
I’ve found in jqxCalendar->_format this line which causes this:
if (a.global) {a.global.culture.calendar = this.localization.calendar; …Thus in the scenario:
* e.g. load jquery.glob.de-DE.js
* on document loaded set preferred culture (globally) to German
* initialize new jqxDateTimeInput, setting a value and not setting culture
=> $.global.culture is broken, $.global.cultures[“de-DE”] is broken and can’t be used anymore.When the next version is planned to be released? Would it be fixed there?
Also, jqxDateTimeInput doesn’t currently support “null” values well (when editor’s value == NULL – any keyboard input is impossible). What are the plans – will this be fixed in near future?
Hi NickVishnievski,
We will investigate the reported behavior.
Thank you for the valuable feedback!
However, I think that the culture’s name should be ‘de-DE’, not ‘de’.
Here’s a working sample:
<!DOCTYPE html><html lang="en"><head> <title id="Description">Integration of jqxDateTimeInput with Knockout</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="../../scripts/json2.js"></script> <script type="text/javascript" src="../../scripts/knockout-2.2.1.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script type="text/javascript"> $(document).ready(function () { var viewModel = function (date) { this.date = ko.observable(date); this.disabled = ko.observable(false); this.displayDate = function () { alert("Date: " + this.date()); } this.setDate = function () { var date = new Date(); date.setFullYear(2012, 11, 11); this.date(date); } }; var date = new Date(); date.setFullYear(2012, 10, 10); ko.applyBindings(new viewModel(date)); }); </script></head><body class='default'> <div id="input" data-bind="jqxDateTimeInput: {culture: 'de-DE', value: date, disabled: disabled, width: '250px', height: '25', theme: getDemoTheme()}"> </div> <div style="margin-top: 5px; clear: both;"> <input id="getButton" data-bind="click: displayDate, jqxButton: {theme: getDemoTheme()}" type="button" value="Get Value" /> <input id="setButton" data-bind="click: setDate, jqxButton: {theme: getDemoTheme()}" type="button" value="Set Value" /> <div data-bind="jqxCheckBox: {checked: disabled, width: '100px', theme: getDemoTheme()}" style='margin-top: 5px;' id="checkBox">Disabled</div> </div></body></html>
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHello Peter.
Great, thank you for the answer. I see the point – i didn’t attach “globalize.culture.de-DE.js” and used jquery.global.de-DE.js instead trying to arrange it all together. Thank you, it works now!
Just one more question – is it possible to set the default culture globally, without specifying “culture” binding/property in each control?
Just one more question – is it possible to set the default culture globally, without specifying “culture” binding/property in each control?
I’m interested in that question also. Thank you
-
AuthorPosts
You must be logged in to reply to this topic.