2

I using jquery datepickers in my project and need to have local language on it.

enter image description here

I need to pass language from back end via gon.locale(rails stuff)

So here is my ts code

 const search_legs_1_datepicker = $("#search_legs_1_datepicker");
var leg_1_datepicker = $("#search_legs_1_datepicker").datepicker({

  language: gon.locale,
  classes: 'inline-picker',
  altField: '#search_legs_1_date',
  defaultDate: new Date(search_legs_1_datepicker.attr("data-defaultDate")),
  minDate: new Date(search_legs_1_datepicker.attr('data-mindate')),
  maxDate: new Date(search_legs_1_datepicker.attr('data-maxdate')),
  altFormat: 'yy-mm-dd',
  onSelect: (formattedDate, date, inst) => {
    if ($("#search_legs_1_hotel_date").length > 0) {
      $('#search_legs_0_hotel_date').datepicker().data('datepicker').update('maxDate', date);
      $('#search_legs_1_hotel_date').datepicker().data('datepicker').update('maxDate', date);
      $('#search_legs_1_hotel_date').datepicker().data('datepicker').datepicker("setDate", date);
    }
  }
})

I checked gon.locale with console and get sv-SE so it's pass language.

Also I try to do it like this

language:"sv-SE"

It not works too.

But for some reasons I have en at my datepickers.

Where is my problem?

Balance
  • 551
  • 2
  • 10
  • 23

2 Answers2

1

Check that you have the language file.

Datepicker provides support for localizing its content to cater for different languages and date formats. Each localization is contained within its own file with the language code appended to the name, e.g., jquery.ui.datepicker-fr.js for French. The desired localization file should be included after the main datepicker code. Each localization file adds its options to the set of available localizations and automatically applies them as defaults for all instances.

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

Localization files can be found there : https://github.com/jquery/jquery-ui/tree/master/ui/i18n

Sébastien S.
  • 1,444
  • 8
  • 14
  • Where I need to place language file? – Balance Apr 06 '18 at 08:23
  • It's written in the quote. The desired localization file should be included after the main datepicker code. Now I guess you have the elements. Also I don't see a _datepicker-sv-SE.js_ in their github so maybe you should try to get `sv` from your backend and not `sv-SE`. And the file that you would include would be this one https://github.com/jquery/jquery-ui/blob/master/ui/i18n/datepicker-sv.js – Sébastien S. Apr 06 '18 at 08:26
  • Thank's it helps. – Balance Apr 06 '18 at 09:56
0

You need to include language file and then set the default language as "sv".

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

Date Picker on input field: <input type="text" id="search_legs_1_datepicker" name="date1"/>



const search_legs_1_datepicker = $("#search_legs_1_datepicker");
var leg_1_datepicker = $("#search_legs_1_datepicker").datepicker({

  //language: gon.locale,
  classes: 'inline-picker',
  altField: '#search_legs_1_date',
  defaultDate: new Date(search_legs_1_datepicker.attr("data-defaultDate")),
  minDate: new Date(search_legs_1_datepicker.attr('data-mindate')),
  maxDate: new Date(search_legs_1_datepicker.attr('data-maxdate')),
  altFormat: 'yy-mm-dd',
  onSelect: (formattedDate, date, inst) => {
    if ($("#search_legs_1_hotel_date").length > 0) {
      $('#search_legs_0_hotel_date').datepicker().data('datepicker').update('maxDate', date);
      $('#search_legs_1_hotel_date').datepicker().data('datepicker').update('maxDate', date);
      $('#search_legs_1_hotel_date').datepicker().data('datepicker').datepicker("setDate", date);
    }
  }
})


$.datepicker.setDefaults($.datepicker.regional['sv']);

This file supports all languages - "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"

If you want to include specific file then get the specific langauge file from here https://github.com/jquery/jquery-ui/tree/master/ui/i18n.

Selvarani
  • 310
  • 1
  • 5