How I can use a other dateformat in my jQuery Datepicker?

Question

I use a jquery datepicker in my ASP.NEt Application and I want if the User is from Spania or german I use a other dateformat.

Here is my jquery code:

$(function () {
    $("#txtAbwesenheitBis").datepicker();
    $("#format").change(function () {
        $("#txtAbwesenheitBis").datepicker("option", "dateFormat", $(this).val());
    });
});

How I can use a other dateformat? Or how I can use the german dateformat?

Joe · Answer 1 · 2012-09-24T13:00:22.957

The documentation describes how to localize the calendar.

Basically you just include the appropriate localization script, which you can download from the jQuery-ui web site, e.g.:

<script type="text/javascript" src="/scripts/jquery.ui.datepicker-de.js'></script>

and you don't need to specify the dateFormat parameter: the appropriate default will be set by the localization script. To support multiple languages you can do something like:

<script type="text/javascript" src="/scripts/jquery.ui.datepicker-<% =MyLanguage %>.js'></script>

This solution gives you localized month and day names in the popup calendar, as well as a default date format that matches the selected culture.

score 1 · Answer 2 · answered Sep 24 '12 at 10:35

1

Try like this

$("#txtAbwesenheitBis").datepicker({ dateFormat :"dd.mm.yyy"});

for the german format

answered Sep 24 '12 at 10:35

GautamD31

28,552
10
64
85

Setting dateFormat to `dd.mm.yy` (not `dd.mm.yyy`) will localize the date format but won't localize the popup calendar. – Joe Sep 24 '12 at 10:52
@Joe im just given the dateformat for the german standards only – GautamD31 Sep 24 '12 at 10:56
`yyy` is not a valid API date format http://docs.jquery.com/UI/Datepicker/formatDate – Petah Sep 24 '12 at 11:59

Viktor S. · Accepted Answer · 2012-09-24T11:07:53.493

1

Here is a link where possible formatting options are shown. Just build required formatting string using description.

Upd: To set a formatting string depending on lable value you may use something like this:

if($("#lbllanguagelabel").text() == "EN")
  { 
    $("#txtAbwesenheitBis").datepicker("option", "dateFormat", 'en-format-string'); 
  } else {
   ...
 }

But note that if your lable has runat="server", its id on client side will not be the same as on server side, so you should use $("#<%=lbllanguagelabel.ClientID %>").text() or, what is much simpler, define some unique class for it:

<asp:lable id="lbllanguagelabel" runat="server" CssClass="languageLable"...

and JS:

if($(".languageLable").text() == "EN")
      { 
        $("#txtAbwesenheitBis").datepicker("option", "dateFormat", 'en-format-string'); 
      } else {
       ...
     }

edited Sep 24 '12 at 11:07

answered Sep 24 '12 at 10:38

Viktor S.

12,736
1
27
52

Hm. In many ways. If you have a dropdown to switch - just set formatting string as value of corresponding option and use `$("#format").change` just like you have it in code. Or you may use `registerstartupscript` and simply put a JS with some variable set to required format. – Viktor S. Sep 24 '12 at 10:43
[For instance](http://stackoverflow.com/questions/553813/how-do-i-give-javascript-variables-data-from-asp-net-variables) - similar question on SO – Viktor S. Sep 24 '12 at 10:46
for example I use a asp:label for the case in JS. The ASP:label text is EN, can I use it in the JS Code for change the format? how this. if((#"lbllanguagelabel.text") == "EN") { $(#format).chage...}else {...} – Tarasov Sep 24 '12 at 10:54

How I can use a other dateformat in my jQuery Datepicker?

3 Answers3