CODEWITHSUNDEEP
jquery-ui
Lasse Edsvik
Lasse Edsvik

Reputation: 9298

JQuery datepicker language

I'm using the jQuery datepicker from jqueryui.com and I have a problem changing the calendar to Swedish, I have this code:

    <script type="text/javascript">
    $(function() {
        $.datepicker.setDefaults($.datepicker.regional['sv']);
        $("#StartDate").datepicker();
        $('#StartDate').datepicker('option', 'dateFormat', 'yy-mm-dd');
    }); 
</script>

Still it shows as an English calendar.

What might be missing?

Upvotes: 34

Views: 215063

Answers (9)

Piero Alberto
Piero Alberto

Reputation: 3943

In 2020, just do

$.datetimepicker.setLocale('en');

Of course, replace 'en' with the correct language ('sv', 'fr', ...)

Upvotes: 0

Rodrigo Vergara
Rodrigo Vergara

Reputation: 29

Include js files of datepicker and language (locales)

'resource/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js',
'resource/bower_components/bootstrap-datepicker/dist/locales/bootstrap-datepicker.sv.min.js',

In the options of the datepicker, set the language as below:

$('.datepicker').datepicker({'language' : 'sv'});

Upvotes: -1

&#214;mer Faruk Demiral
&#214;mer Faruk Demiral

Reputation: 1

Try Adding this

$('input[name="daterangepicker"]').daterangepicker({

   "locale": {
    "firstDay" :1 // 0 Tuesday - 6 - Monday between
         }});

It must be completed within the locale object of the defined daterangepicker. detailed information can be found here.

Upvotes: 0

user6703538
user6703538

Reputation:

Include language file source in your head script of the HTML body.

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>

Example on JSFiddle

Upvotes: 6

SpongePablo
SpongePablo

Reputation: 890

A quick Update, for the text "Today", the right names are:

todayText: 'Huidige', todayStatus: 'Bekijk de huidige maand',

Upvotes: 0

Deniss Kozlovs
Deniss Kozlovs

Reputation: 4841

Maybe you don't have a language file:

Language files are here: https://github.com/jquery/jquery-ui/tree/master/ui/i18n

A new localization should be created in a separate JavaScript file named ui.datepicker-.js. Within a document.ready event it should add a new entry into the $.datepicker.regional array, indexed by the language code, with the following attributes:

http://api.jqueryui.com/datepicker/

Upvotes: 37

Marek Pavelek
Marek Pavelek

Reputation: 1147

Here is example how you can do localization by yourself.

jQuery(function($) {
  $('input.datetimepicker').datepicker({
    duration: '',
    changeMonth: false,
    changeYear: false,
    yearRange: '2010:2020',
    showTime: false,
    time24h: true
  });

  $.datepicker.regional['cs'] = {
    closeText: 'Zavřít',
    prevText: '&#x3c;Dříve',
    nextText: 'Později&#x3e;',
    currentText: 'Nyní',
    monthNames: ['leden', 'únor', 'březen', 'duben', 'květen', 'červen', 'červenec', 'srpen',
      'září', 'říjen', 'listopad', 'prosinec'
    ],
    monthNamesShort: ['led', 'úno', 'bře', 'dub', 'kvě', 'čer', 'čvc', 'srp', 'zář', 'říj', 'lis', 'pro'],
    dayNames: ['neděle', 'pondělí', 'úterý', 'středa', 'čtvrtek', 'pátek', 'sobota'],
    dayNamesShort: ['ne', 'po', 'út', 'st', 'čt', 'pá', 'so'],
    dayNamesMin: ['ne', 'po', 'út', 'st', 'čt', 'pá', 'so'],
    weekHeader: 'Týd',
    dateFormat: 'dd/mm/yy',
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: ''
  };

  $.datepicker.setDefaults($.datepicker.regional['cs']);
});
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
  <script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
  <script src="datepicker-cs.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      console.log("test");
      $("#test").datepicker({
        dateFormat: "dd.m.yy",
        minDate: 0,
        showOtherMonths: true,
        firstDay: 1
      });
    });
  </script>
</head>

<body>
  <h1>Here is your datepicker</h1>
  <input id="test" type="text" />
</body>
</html>

Upvotes: 9

Bart Hoekstra
Bart Hoekstra

Reputation: 6144

This is for the dutch people.

$.datepicker.regional['nl'] = {clearText: 'Effacer', clearStatus: '',
    closeText: 'sluiten', closeStatus: 'Onveranderd sluiten ',
    prevText: '<vorige', prevStatus: 'Zie de vorige maand',
    nextText: 'volgende>', nextStatus: 'Zie de volgende maand',
    currentText: 'Huidige', currentStatus: 'Bekijk de huidige maand',
    monthNames: ['januari','februari','maart','april','mei','juni',
    'juli','augustus','september','oktober','november','december'],
    monthNamesShort: ['jan','feb','mrt','apr','mei','jun',
    'jul','aug','sep','okt','nov','dec'],
    monthStatus: 'Bekijk een andere maand', yearStatus: 'Bekijk nog een jaar',
    weekHeader: 'Sm', weekStatus: '',
    dayNames: ['zondag','maandag','dinsdag','woensdag','donderdag','vrijdag','zaterdag'],
    dayNamesShort: ['zo', 'ma','di','wo','do','vr','za'],
    dayNamesMin: ['zo', 'ma','di','wo','do','vr','za'],
    dayStatus: 'Gebruik DD als de eerste dag van de week', dateStatus: 'Kies DD, MM d',
    dateFormat: 'dd/mm/yy', firstDay: 1, 
    initStatus: 'Kies een datum', isRTL: false};
$.datepicker.setDefaults($.datepicker.regional['nl']);

Upvotes: 17

Magnus
Magnus

Reputation: 101

You need the following line:

<script src="../jquery/development-bundle/ui/i18n/jquery.ui.datepicker-sv.js"></script>

Adjust the path depending on where you put the jquery-files.

Upvotes: 10

Related Questions