Datetimepicker language

Hello, I’ have problem with datetimepicker when I want to change datetimepicker language on link, it doesn’t work, on select work just fine but with links i have problem.
Datetimepicker on select work but datetime picker <input type="text" id="dt"> not change language it’s stay sr-SR Serbian language when I click on link fr still is on Serbian language.
Please Help
Here the code

 <!doctype html>
<html >
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script src="datepicker-ar.js"></script>
  <script src="datepicker-fr.js"></script>
  <script src="datepicker-he.js"></script>
  <script src="datepicker-zh-TW.js"></script>
  <script src="datepicker-sr-SR.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );
    $( "#locale" ).change(function() {
      $( "#datepicker" ).datepicker( "option",
        $.datepicker.regional[ $( this ).val() ] );
    });
  });
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker">&nbsp;
  <select id="locale">
      <option value="ar" id="ar">Arabic (&#8235;(&#1575;&#1604;&#1593;&#1585;&#1576;&#1610;&#1577;</option>
      <option value="zh-TW" id="zh-TW">Chinese Traditional (&#32321;&#39636;&#20013;&#25991;)</option>
      <option value=""id="en">English</option>
      <option value="fr" id="fr" selected="selected">French (Fran&ccedil;ais)</option>
      <option value="he" id="he">Hebrew (&#8235;(&#1506;&#1489;&#1512;&#1497;&#1514;</option>
      <option value="sr-SR" id="sr-SR">Srpski</option>
  </select></p>
 
  <br>
  <br>
  <a href="#" id="sr">Sr</a> || <a href="#" id="fr" >Fr</a>
  <br>
  <input type="text" id="dt">
  <script>
      $(function() {
     $("#dt").datepicker($.datepicker.regional["sr-SR"]);
          $("#fr").click(function(){
              $("#dt").datepicker($.datepicker.regional["fr"]);
          });
           });
  </script>
</body>
</html>

Hi there stanke1,

bearing in mind that I know practically nothing about “JQuery” methodology, try this…

[code]
<!doctype html>

Date Picker ul { padding:0; margin:16px 0; list-style-type:none; } li { display:inline-block; padding-right:10px; color:#999; } a { margin-right:10px; color:#666; } a:hover { color:#00f; }

Date:

[/code]

p.s…

I have just noticed that the date picker works in Firefox 38.0, Opera 12.17
and Safari 5.1.7, but not in IE11, Chrome 43.0 and Opera 29.0. :grimacing:

coothead

If coothead’s code does what you want, you could move all of those click handlers into something more generic.
Maybe:

$("ul li a").click(function(){
  $('#dt').datepicker('option',$.datepicker.regional[this.id]);
  return false;
});

Hi there Pullo,

that would certainly save a few bytes. :smile:

My lack of interest in “JQuery” stopped me from pursuing it any further. :mask:

coothead

Hey coothead,

just an easy win : )

Hi there Pullo,

I struggled for over an hour with that “JQuery” only to find out that it only worked in my test
browser, Firefox 38.0.1 and two bloody defunct browsers Opera 12.17 and Safari 5.1.2. :cold_sweat:

C’est la vie. :confused:

coothead

That’ll be because of how you were embedding the JS files from GIT.

If you look in the console, you will see something like:

Refused to execute script from ... because its MIME type (text/plain) is not executable, and strict MIME type checking is enabled.

Change the script includes to:

<script src="https://rawgit.com/jquery/jquery-ui/master/ui/i18n/datepicker-ar.js"></script>
<script src="https://rawgit.com/jquery/jquery-ui/master/ui/i18n/datepicker-fr.js"></script>
<script src="https://rawgit.com/jquery/jquery-ui/master/ui/i18n/datepicker-he.js"></script>
<script src="https://rawgit.com/jquery/jquery-ui/master/ui/i18n/datepicker-zh-TW.js"></script>
<script src="https://rawgit.com/jquery/jquery-ui/master/ui/i18n/datepicker-sr-SR.js"></script>

You notice I have swapped raw.githubusercontent.com for rawgit.com

It’s explained in more detail here: http://stackoverflow.com/questions/17341122/link-and-execute-external-javascript-file-hosted-on-github

Hi there Pullo,

yes, I just saw that in Chrome. too. :smile:

Did not know the about your suggested swap or detailed explanation link though. :confused:

Downloading and saving the javascript locally, did show that it would work OK in Chrome et al. :wink:

coothead

Thanks, this is great its work, but I have other problem when i switching between language now if i set return: false
session of ?lang=cir and ?lang=lat not working and when i set return:true then session working chage text on another language but then not working datetimepicker.

Code: for changing language and this id I use to change language for datetimepicker

<div class="col-md-2  wow bounceInRight" data-wow-delay="0.6s" id="header-font">
                    <div id="lang" class="wow flash" data-wow-delay="2s">
                        <p> <a href="?lang=cir" id="sr-SR">Cir</a> | <a href="?lang=lat" id="lat">Латиница</a>
                    </div>
                    </div>

Hi there stanke1,

if return false is giving you problems, then change this…

[code]

[/code]

…to this…

[code]

  • Ar ||
  • Ch ||
  • En ||
  • Fr ||
  • He ||
  • Sr
[/code]

…and this…

[code]

[/code]

…to this…

[code]

[/code]

coothead

@coothead Would it be useful to use “javascript:void(0)” in place of #? That way we need not to change the markup.

Hi there designerlokesh,

I, personally, believe that it is bad practice to insert “JavaScript” into the href attribute. :mask:

Someone, much more erudite than I, may wish to elucidate. :grinning:

coothead

I agree with you @coothead , it all depends on the scenarios to be catered while doing development.

To make datepicker accessible via keyboard; you may need anchor to get the focus on pressing TAB. [Accessibility Support].

Hi there designerlokesh,

if “Accessibility Support” is an issue for the O.P. then he can use this…

[code]

  • Ar ||
  • Ch ||
  • En ||
  • Fr ||
  • He ||
  • Sr
[/code]

coothead

I must have <a href="?lang=cir" id="sr-SR">Cir</a> | <a href="?lang=lat" id="lat"> because of session
that’s how i change latin to cyrillic.
Thank’s anyway.

Hi there stanke1,

how about using “mouseover” instead of “click” ?

So this code…

[code]

[/code]

…with a little information on the links…

<a href="?lang=cir" id="sr-SR" title="mouseover will display the correct datepicker">

coothead

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.