Comment localiser le Datepicker de jQuery UI ?

Question

Comment localiser le Datepicker de jQuery UI ?

Demandé el 30 de Janvier, 2009: Quand la question a-t-elle été
54198 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai vraiment besoin d'un calendrier déroulant localisé. Un calendrier en anglais ne communique pas exactement l'excellence sur un site web norvégien ;-)

J'ai expérimenté le jQuery DatePicker Leur site Web indique qu'il peut être localisé, mais cela ne semble pas fonctionner.

J'utilise ASPNET.MVC, et je veux vraiment m'en tenir à une seule bibliothèque javascript. Dans ce cas, il s'agit de jQuery.

Le calendrier de la boîte à outils ajax serait acceptable, si seulement il pouvait lui aussi afficher les noms norvégiens.

Mise à jour : Génial ! Je vois qu'il me manque les fichiers de langue, un détail pas si mineur :-)

Demandé el 30 de Janvier, 2009 par Thomas Eyde

0 votes

Vérifiez ce démo. La source donne un bon exemple de la façon de procéder.

Commenté el 30 de Janvier, 2009 par Thomas Watnedal

Answer 1

5 Réponses

Answer 2

10voto

Salman A Points 60620

1. Vous devez charger les fichiers i18n de jQuery UI :

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

2. Utilice $.datepicker.setDefaults pour définir les valeurs par défaut pour TOUS les sélecteurs de date.

3. Si vous souhaitez remplacer un ou plusieurs paramètres avant de définir les valeurs par défaut, vous pouvez utiliser cette option :

var options = $.extend(
    {},                                  // empty object
    $.datepicker.regional["fr"],         // fr regional
    { dateFormat: "d MM, y" /*, ... */ } // your custom options
);
$.datepicker.setDefaults(options);

L'ordre des paramètres est important en raison de la façon dont le système de gestion de l'information est utilisé. jQuery.extend travaux. Deux exemples incorrects :

/*
 * This overwrites the global variable itself instead of creating a
 * customized copy of french regional settings
 */
$.extend($.datepicker.regional["fr"], { dateFormat: "d MM, y"});

/*
 * The desired dateFormat is overwritten by french regional 
 * settings' date format
 */
$.extend({ dateFormat: "d MM, y"}, $.datepicker.regional["fr"]);

Répondu el 28 de Décembre, 2014 par Salman A (60620 Points )

Answer 3

6voto

Marek Pavelek Points 95

Voici un exemple de la façon dont vous pouvez effectuer la localisation sans bibliothèque supplémentaire.

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

  $.datepicker.regional['cs'] = {
    closeText: 'Zavrít',
    prevText: '&#x3c;Dríve',
    nextText: 'Pozdeji&#x3e;',
    currentText: 'Nyní',
    monthNames: ['leden', 'únor', 'brezen', 'duben', 'kveten', 'cerven', 'cervenec', 'srpen',
      'zárí', 'ríjen', 'listopad', 'prosinec'
    ],
    monthNamesShort: ['led', 'úno', 'bre', 'dub', 'kve', 'cer', 'cvc', 'srp', 'zár', 'ríj', 'lis', 'pro'],
    dayNames: ['nedele', 'pondelí', 'úterý', 'streda', 'ctvrtek', 'pátek', 'sobota'],
    dayNamesShort: ['ne', 'po', 'út', 'st', 'ct', 'pá', 'so'],
    dayNamesMin: ['ne', 'po', 'út', 'st', 'ct', '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="http://stackoverflow.com//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>

Répondu el 7 de Novembre, 2015 par Marek Pavelek (95 Points )

Answer 4

5voto

joonas.fi Points 183

Si vous utilisez le sélecteur de date de jQuery UI et moment.js dans le même projet, vous devez utiliser les données locales de moment.js :

// Finnish. you need to include separate locale file for each locale: https://github.com/moment/moment/tree/develop/locale
moment.locale('fi'); 

// fetch locale data internal structure, so we can shove it inside jQuery UI
var momentLocaleData = moment.localeData(); 

$.datepicker.regional['user'] = {
    monthNames: momentLocaleData._months,
    monthNamesShort: momentLocaleData._monthsShort,
    dayNames: momentLocaleData._weekdays,
    dayNamesShort: momentLocaleData._weekdaysMin,
    dayNamesMin: momentLocaleData._weekdaysMin,
    firstDay: momentLocaleData._week.dow,
    dateFormat: 'yy-mm-dd' // "2016-11-22". date formatting tokens are not easily interchangeable between momentjs and jQuery UI (https://github.com/moment/moment/issues/890)
};

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

Répondu el 22 de Novembre, 2016 par joonas.fi (183 Points )

Answer 5

4voto

DevDonkey Points 3866

Juste au cas où quelqu'un serait TOUJOURS bloqué sur ce sujet, malgré les autres réponses, j'ai résolu le problème avec :

$.datepicker.setDefaults($.datepicker.regional['en-GB']);

Notez le "GB" supplémentaire. Après cela, tout s'est bien passé.

Répondu el 9 de Octobre, 2016 par DevDonkey (3866 Points )

Answer 6

4voto

Utilisateur non enregistré Points 0

Cette solution peut vous aider.

$(document).ready(function () {
  var userLang = navigator.language || navigator.userLanguage;

  var options = $.extend({},
    $.datepicker.regional["ja"], {
      dateFormat: "yy/mm/dd",
      changeMonth: true,
      changeYear: true,
      highlightWeek: true
    }
  );

  $("#japaneseCalendar").datepicker(options);
});

#ui-datepicker-div {
  font-size: 14px;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
</head>
<body>
<h3>Japanese JQuery UI Datepicker</h3>
<input type="text" id="japaneseCalendar"/>

</body>
</html>

Répondu el 5 de Décembre, 2017 par Utilisateur non enregistré (0 Points )

Comment localiser le Datepicker de jQuery UI ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment localiser le Datepicker de jQuery UI ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: