jQWidgets Forums

Tagged: culture, datetimeinput, jqxdatetimeinput

This topic contains 6 replies, has 2 voices, and was last updated by mirko.lugano 10 years, 6 months ago.

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

Author

Problem localizing jqxDateTimeInput Posts

November 6, 2014 at 9:15 am Problem localizing jqxDateTimeInput #62270

Participant

Hi I am testing the DateTimeInput component, but I am having problems changing the UI culture. I tried to follow this example http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatetimeinput/localization.htm?arctic , here is my code:

<!DOCTYPE html>
<head>           
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>      
    <script src="Scripts/lib/jqwidgets/jqx-all.js"></script>
        
    <link rel="stylesheet" href="Scripts/lib/jqwidgets/styles/jqx.base.css" />

    <script type="text/javascript">
        var init = function () {
            console.log(window.Globalize); //here I get 'undefined'

            //this works ok
            $("#result").jqxDateTimeInput({
                width: '10%',
                formatString: 'dd.MM.yyyy'
            });

            //the scripts contents are retrieved correctly, but
            //this gives parse error: "Cannot read property 'addCultureInfo' of undefined"
            $.getScript('Scripts/lib/jqwidgets/globalization/globalize.culture.de-DE.js')
              .done(function (script, textStatus) {
                  console.log(script);
                  console.log(textStatus);
              })
              .fail(function (jqxhr, settings, exception) {
                  //I always land here
                  debugger;
              });       
        }

        $(document).on('ready', function () {
            init();
        });
    </script>

</head>
<body>    
   <div id="result"></div>    
</body>
</html>

As you can see I am using jQuery 2.1.0. The dateTimeInput component is set up correctly (in English) but then I get an error retrieving the script. I inspected with browser’s developer tools and I can see that the script contents are correctly retrieved, I just get the error: ‘Globalize is undefined’. If I do in fact console.log(window.Globalize) it says undefined. I have tested this with chrome (latest), firefox (latest) and IE 11.
What am I doing wrong?
Best regards

November 6, 2014 at 10:25 am Problem localizing jqxDateTimeInput #62289

Nadezhda

Participant

Hello mirko.lugano,

You have missed to set the culture property of jqxDateTimeInput. Please, check the implementation on Localization demo, which shows how to set this property.

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

November 6, 2014 at 11:02 am Problem localizing jqxDateTimeInput #62298

mirko.lugano

Participant

Thanx for the quick reply, sorry, I failed to explain myself correctly. I did follow the example mentioned above, the relevant code I had tried anyway is

           //the scripts contents are retrieved correctly, but
            //this gives parse error: "Cannot read property 'addCultureInfo' of undefined"
            $.getScript('Scripts/lib/jqwidgets/globalization/globalize.culture.de-DE.js')
              .done(function (script, textStatus) {
                  //NOTE: I never get here
                  $("#result").jqxDateTimeInput({ culture: 'de-DE' });
                  //console.log(script);
                  //console.log(textStatus);
              })
              .fail(function (jqxhr, settings, exception) {
                  //NOTE: I always land here
                  debugger;
              });

I have used this $.getScript() syntax which is different from the ‘official’ Demo example because I am using jquery 2.1.0. The point is I never get to the .done() function because the getScript function fails as described in my previous post.
I had also tried to load the localized file by including in the <head> section, like

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>      
    <script src="Scripts/lib/jqwidgets/jqx-all.js"></script>        
    <script src="Scripts/lib/jqwidgets/globalization/globalize.culture.de-DE.js"></script>
</head>

But already here I get the same error: ‘Cannot read property ‘addCultureInfo’ of undefined’. Of course if I later try to initialize the dateTimeInput component like this

$("#result").jqxDateTimeInput({
                width: '10%',
                formatString: 'dd.MM.yyyy',
                culture: 'de-DE'
            });

it doesn’t work. I am using the very latest version of jqxWidget (downloaded yesterday)

November 6, 2014 at 11:25 am Problem localizing jqxDateTimeInput #62301

mirko.lugano

Participant

UPDATE: I was not including the globalize.js script in the <head> section. I now can load the script correctly, but even then when I set the culture like this

 $.getScript('Scripts/lib/jqwidgets/globalization/globalize.culture.de-DE.js')
              .done(function (script, textStatus) {
                 //Now I DO get here
                  $("#result").jqxDateTimeInput({ culture: 'de-DE' });
              })
              .fail(function (jqxhr, settings, exception) {

              });

the component remains in English. I get no errors on the developer tools’ console.

November 6, 2014 at 11:47 am Problem localizing jqxDateTimeInput #62304

mirko.lugano

Participant

SOLVED: it works. Adding the ‘globalize.js’ to the <head> section was actually everything that was needed.

November 6, 2014 at 11:48 am Problem localizing jqxDateTimeInput #62306

Nadezhda

Participant

Hello mirko.lugano,

Here is an example that works with both versions – jquery-2.1.0 and jquery-1.11.1.

<!DOCTYPE html>
<html lang="en">
<head>    
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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/globalization/globalize.culture.de-DE.js"></script>  
    <script type="text/javascript">
        $(document).on('ready', function () {
            $("#result").jqxDateTimeInput({
                width: '10%',
                formatString: 'dd.MM.yyyy',
                culture: 'de-DE'
            });
        });
    </script>
</head>
<body>
    <div id="result"></div>
</body>
</html>

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

November 6, 2014 at 12:07 pm Problem localizing jqxDateTimeInput #62312

mirko.lugano

Participant

Hi thank you, yes as I stated in my last post just adding the missing ‘globalize.js’ script solved the issue and now it works with both approaches on my side too. Thanx for your help.

Author

Posts

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

You must be logged in to reply to this topic.