web-dev-qa-db-fra.com

Comment définir le format de paramètres régionaux à partir de datepicker?

Comment définir le format de date dans le sélecteur de date de jQuery UI en fonction des paramètres régionaux de l'utilisateur?

Je reçois le code HTML source:

<script type="text/javascript">
    $(function() {
        $(".datefield2").datepicker($.datepicker.regional['de']);
    });
</script>
<form action="/Home/TestDate" method="post">    <input class="datefield2 hasDatepicker valid" name="date" value="21.12.2012" type="text" id="date">
    <input type="submit" value="send">
</form>

Si je sélectionne une date dans le datepicker, je reçois 12/21/2012, mais j’ai besoin de 21.12.2012.

jqueryjquery-uidatepickerjquery-ui-datepicker
12
Mediator

Vous pouvez définir le format de date comme ceci: 

  $(".datefield2").datepicker({ "dateFormat": "dd.mm.yy"});
4
Fiona - myaccessible.website

Utilisez l'option dateFormat pour passer à un format personnalisé

$(function() {
    $(".datefield2").datepicker($.datepicker.regional['de']);
    $(".datefield2").datepicker('option','dateFormat','dd.mm.yy');
});

Le vrai problème est que vous devez inclure manuellement les fichiers de localisation.

Ils peuvent être trouvés à https://github.com/jquery/jquery-ui/tree/master/ui/i18n
Celui spécifique en allemand est https://github.com/jquery/jquery-ui/blob/master/ui/i18n/datepicker-de.js

La démo ( avec localisation complète ) est visible sur http://jsfiddle.net/gaby/h07ny9ep/

16
Gabriele Petrioli

Comme il ne semble pas que les informations sur les paramètres régionaux soient facilement disponibles, j'ai décidé d'utiliser une approche légèrement différente: j'utilise uniquement datepicker pour choisir la date et extraire la date en tant que telle, mais pour l'affichage, j'utilise un div Date.toLocaleDateString () . De cette façon, je n'ai pas besoin de récupérer le format ou pire - de les fournir moi-même.

JSFiddle

HTML:

<div style="position:relative">
  <div id="date-text">

  </div>
  <div style="position: absolute; left: 0; top: 0">
    <input type="text" size="10" id="dt" style="opacity:0"/>
  </div>
</div>

JS:

var today = new Date();
today.setHours(0,0,0,0);
$("#dt").datepicker({defaultDate: today}).on('change', function() {
  $("#date-text").html($("#dt").datepicker("getDate").toLocaleDateString());
});
$("#date-text").html(today.toLocaleDateString());
0
velis

La documentation de JQuery sur le Web semble jouer à cache-cache pour savoir où se trouvent les fichiers I18n du datepicker, par exemple.

Où sont les fichiers i18n de jQuery UI datepicker> = 1.11.0

A partir de cette publication, le lien:

https://raw.githubusercontent.com/jquery/jquery-ui/master/ui/i18n/datepicker-de.js

semble être valide. Si je l'incluais cela ne fonctionnerait pas tout seul. J'ai fini par En utilisant http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js qui n'est pas la même version comme jQuery 1.12 que j’utilise mais cela semble fonctionner.

Veuillez noter que j'utilise le format de date iso 2017-03-18 sous le format aa-mm-jj ici au lieu du style de paramètres régionaux allemand.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet"
    href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
<script>
    $(function() {
        // https://stackoverflow.com/questions/494958/how-do-i-localize-the-jquery-ui-datepicker
        // https://stackoverflow.com/questions/13993619/how-to-set-locale-format-from-datepicker
        $(".datepicker").datepicker($.datepicker.regional['de']);
        $(".datepicker").datepicker('option','dateFormat','yy-mm-dd')
    });
</script>
</head>
0
Wolfgang Fahl