jQWidgets Forums

This topic contains 3 replies, has 3 voices, and was last updated by Bentechsoft 11 years, 11 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

jqxDateTimeInput in version 2.8 is not usable with knockout Posts

April 5, 2013 at 4:43 pm jqxDateTimeInput in version 2.8 is not usable with knockout #18679

Member

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?

April 5, 2013 at 7:14 pm jqxDateTimeInput in version 2.8 is not usable with knockout #18690

Peter Stoev

Keymaster

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 Stoev

jQWidgets Team
http://www.jqwidgets.com

April 5, 2013 at 9:28 pm jqxDateTimeInput in version 2.8 is not usable with knockout #18697

NickVishnievski

Member

Hello 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?

April 13, 2013 at 6:24 pm jqxDateTimeInput in version 2.8 is not usable with knockout #19163

Bentechsoft

Participant

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

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.