Partage
  • Partager sur Facebook
  • Partager sur Twitter

Datepicker en français jQuery

12 janvier 2014 à 23:01:30

Bonjour/Bonsoir à tous !

Comme il est dit dans le titre j'ai besoin d'un calendrier en français d'apparence. Un peu comme celui-ci

http://jqueryui.com/datepicker/#localization

j'ai copier/coller mais et tester dans une page d'html mais il me créer un calendrier en anglais donc à mon avis le calendrier en français doit être compris dans ce fichier auquel apparemment on aurai pas accès :

<link rel="stylesheet" href="/resources/demos/style.css">

Si quelqu'un aurai une idée pour savoir où je pourrai le trouver en français ?

  • Partager sur Facebook
  • Partager sur Twitter
13 janvier 2014 à 12:53:49

Regarder le code source (ou encore L'API lien en bas de page du source) pour voir comment modifier les options du date picker. cette ligne devrait suffire, si j'ai bien lu.

$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );



-
Edité par 007julien 13 janvier 2014 à 12:54:18

  • Partager sur Facebook
  • Partager sur Twitter
13 janvier 2014 à 13:11:40

ça ne fonctionne pas mais j'ai trouvé un susbitut, je le partage :D

$(function() {
$( "#datepicker" ).datepicker({
altField: "#datepicker",
closeText: 'Fermer',
prevText: 'Précédent',
nextText: 'Suivant',
currentText: 'Aujourd\'hui',
monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
weekHeader: 'Sem.',
dateFormat: 'yy-mm-dd'
});
});

Et voilà avec le script jQuery ça nous fait un beau calendrier en français. On peut même modifier. Par défaut il prend le "monthNames"

-
Edité par raïzenn 13 janvier 2014 à 13:14:15

  • Partager sur Facebook
  • Partager sur Twitter
13 janvier 2014 à 16:34:24

On peut faire sans jQuery comme ici avec une date qui s'adapte à différents formats et une année modifiable par simple nouvelle frappe...

-
Edité par 007julien 13 janvier 2014 à 16:35:41

  • Partager sur Facebook
  • Partager sur Twitter
28 février 2014 à 10:48:36

Merci pour le partage car en effet je n'arrive pas non plus à faire fonctionner le

$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] ); // texte en french

Par contre, si quelqu'un a une solution pour le premier jour à lundi, je suis preneur également car

l'API mentionne 

var firstDay = $( "#datepicker" ).datepicker( "option", "firstDay" );
		$( "#datepicker" ).datepicker( "option", "firstDay", 1 ); // premier jour à lundi

Mais c pareil, je ne vois aucune différence ...


  • Partager sur Facebook
  • Partager sur Twitter
28 février 2014 à 12:09:15

Premier jour à Lundi :

parametre firstDay : 1, quand tu initialises ton datepicker...

On peut voir le code HTML que tu as pour construire ton datepicker ?

-
Edité par milOoze 28 février 2014 à 12:10:24

  • Partager sur Facebook
  • Partager sur Twitter
L'informaticien intelligent évite le codage inutile !! Pensez aux autres : utilisez le bouton Sujet Résolu et les +1
28 février 2014 à 12:16:51

Bonjour, j'ai essayé le code de raïzenn, mais ça ne fonctionne pas :o

<input type="text" name="date" id="datepicker">
<script src="js/jquery.js"></script>
<script>
  $( "#datepicker" ).datepicker({
altField: "#datepicker",
closeText: 'Fermer',
prevText: 'Précédent',
nextText: 'Suivant',
currentText: 'Aujourd\'hui',
monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
weekHeader: 'Sem.',
dateFormat: 'yy-mm-dd'
});
</script>




  • Partager sur Facebook
  • Partager sur Twitter
28 février 2014 à 12:21:20

@ToinouPHP : Inclure jquery.js c'est bien....

Inclure jquery-ui.js c'est mieux !!

Voir la doc et les sources qui vont avec

  • Partager sur Facebook
  • Partager sur Twitter
L'informaticien intelligent évite le codage inutile !! Pensez aux autres : utilisez le bouton Sujet Résolu et les +1
4 mars 2014 à 15:37:03

Voila mon code milOoze :

<script>
$(function() {
$( "#datepicker" ).datepicker({
	altField: "#datepicker",
	closeText: 'Fermer',
	prevText: 'Précédent',
	nextText: 'Suivant',
	currentText: 'Aujourd\'hui',
	monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
	monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
	dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
	dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
	dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
	weekHeader: 'Sem.',
	dateFormat: 'yy-mm-dd'
	});
});
// var firstDay = $( "#datepicker" ).datepicker( "option", "firstDay" ); // marche pas
// $( "#datepicker" ).datepicker( "option", "firstDay", 1 ); // premier jour à lundi
// $.datepicker.setDefaults( $.datepicker.regional[ "fr" ] ); // texte en french marche pas
		  $(function() {
			$( "#datepicker" ).datepicker();
		  });
</script>
		
		<label FOR="datepicker">Date : </label>
		<input type="text" id="datepicker" name="datepicker"><br />


Donc, pour le texte en fr, du coup, niquel mais pas le firts day...

-
Edité par manuzed78 4 mars 2014 à 15:37:53

  • Partager sur Facebook
  • Partager sur Twitter
5 mars 2014 à 11:41:17

OK. Donc une petite remarque pour commencer : tu initialises 2 fois ton datepicker ...une première fois avec toutes les options et une seconde fois à vide....

Je te propose le code suivant :

<script type="text/javascript">
$(document).ready(){
$( "#datepicker" ).datepicker({
    altField: "#datepicker",
    closeText: 'Fermer',
    firstDay: 1 ,
    dateFormat: 'yy-mm-dd'
    });$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] ); // texte en french marche pas
});
 
        
</script>



Ce code te permet (normalement) d'avoir le lundi comme premier jour de la semaine

Ensuite pour la traduction française tu n'as pas forcément besoin de tout initialiser.

Le fichier de langue FR est normalement disponible dans le package téléchargeable du datepicker (dans le dossier development-bundle/ui/i18n: Téléchargement du package complet: http://jqueryui.com/download

Il suffit d'inclure le fichier de traduction dans ta page et avec le code proposé je pense que ça dvrait marcher



-
Edité par milOoze 5 mars 2014 à 11:42:27

  • Partager sur Facebook
  • Partager sur Twitter
L'informaticien intelligent évite le codage inutile !! Pensez aux autres : utilisez le bouton Sujet Résolu et les +1
11 mars 2014 à 17:02:02

milOoze a écrit:

OK. Donc une petite remarque pour commencer : tu initialises 2 fois ton datepicker ...une première fois avec toutes les options et une seconde fois à vide....

Je te propose le code suivant :

<script type="text/javascript">
$(document).ready(){
$( "#datepicker" ).datepicker({
    altField: "#datepicker",
    closeText: 'Fermer',
    firstDay: 1 ,
    dateFormat: 'yy-mm-dd'
    });$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] ); // texte en french marche pas
});
 
        
</script>



Ce code te permet (normalement) d'avoir le lundi comme premier jour de la semaine

Ensuite pour la traduction française tu n'as pas forcément besoin de tout initialiser.

Le fichier de langue FR est normalement disponible dans le package téléchargeable du datepicker (dans le dossier development-bundle/ui/i18n: Téléchargement du package complet: http://jqueryui.com/download

Il suffit d'inclure le fichier de traduction dans ta page et avec le code proposé je pense que ça dvrait marcher



-
Edité par milOoze le 5 mars 2014 à 11:42:27

Merci milOoze, à force de faire des essais, on laisse trainer de ces bouts de code ...

Pour le lundi en premier jour, firstDay: 1  fait parfaitement l'affaire :)


Pour le texte en French, je pense que le probleme vient de mon coté : j'ai regardé dans mes repertoires

et j'ai bien un fichier avec la langue fr mais cela doit etre un vieux jquery car ils ne se nomment pas pareil que le dernier en téléchargement.

Je vais garder le code à la main pour le texte French car mon site est gros et j'ai peur de mettre à jour jquery ...


Merci



  • Partager sur Facebook
  • Partager sur Twitter
12 mai 2015 à 16:55:50

En français et commence par Lundi:

<script>
 $(function() {$( "#datepicker" ).datepicker({
  firstDay: 1,
  altField: "#datepicker",
  closeText: 'Fermer',
  prevText: 'Précédent',
  nextText: 'Suivant',
  currentText: 'Aujourd\'hui',
  monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
  monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
  dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
  dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
  dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
  weekHeader: 'Sem.',
  dateFormat: 'yy-mm-dd'});});
 </script>

  • Partager sur Facebook
  • Partager sur Twitter
19 janvier 2016 à 15:27:44

Bonjour à tous,

Pour pouvoir convertir le calendrier en fr, il vous faut un autre fichier js: datepicker-fr.js.

Voici une solution pour avoir le calendrier en Fr:

1- S'assurer de bien inclure JQuery + JQuery

2- Aller sur le site https://jqueryui.com/datepicker/#localization

3- Ouvrir la console à l'aide de la touche F12

4- Sous l'onglet "Réseau", chercher le fichier "datepicker-fr.js" et le télécharger

5- Inclure "datepicker-fr.js" dans votre fichier HTML

6- Insérer le code:

<script type="text/javascript">
$(document).ready(function(){
$('#datepicker').datepicker($.datepicker.regional['fr']);
});
</script>



  • Partager sur Facebook
  • Partager sur Twitter
3 février 2016 à 8:47:59

Mettre les paramètres de langue dans les options par défaut a fonctionné pour moi : 

$.datepicker.setDefaults(
	{
		altField: "#datepicker",
		closeText: 'Fermer',
		prevText: 'Précédent',
		nextText: 'Suivant',
		currentText: 'Aujourd\'hui',
		monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
		monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
		dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
		dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
		dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
		weekHeader: 'Sem.',
		dateFormat: 'yy-mm-dd'
	}
);



-
Edité par IvanFrain 3 février 2016 à 8:48:18

  • Partager sur Facebook
  • Partager sur Twitter
9 septembre 2016 à 19:03:06

Hello,

Merci à tous

Après avoir tâtonné avec vos différents code, voici celui qui fonctionne.

Il n'y a plus qu'à télécharger le style jquery-ui.min.css (ici : http://jqueryui.com/download/), à l'uploader à la racine de votre site et à copier coller le code ci-dessous :

<link rel="stylesheet" href="/jquery-ui.min.css"> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript">
$.datepicker.setDefaults(
    {
        altField: "#datepicker",
        closeText: 'Fermer',
        prevText: 'Précédent',
        nextText: 'Suivant',
        currentText: 'Aujourd\'hui',
        monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
        monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
        dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
        dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
        dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
        weekHeader: 'Sem.',
        dateFormat: 'dd-mm-yy'
    }
);


</script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
<input name="start" type="text" id="datepicker" />



  • Partager sur Facebook
  • Partager sur Twitter
Si on mettait les cons en orbite on ne verrait plus le soleil.
15 septembre 2016 à 16:51:47

Moi j'ai suivi la doc de jquery-ui:

<script src="js/jquery-ui.min.js"></script>
<script src="js/datepicker-fr.js"></script>
<script type="text/javascript">
$( function() {
     $.datepicker.setDefaults($.datepicker.regional["fr"]);
     $( "#datepicker" ).datepicker();
} );
</script>

Dans la doc il y a le lien vers le github dans lequel on trouve le datepicker-fr.js. 

-
Edité par LSRWyvern 15 septembre 2016 à 16:52:36

  • Partager sur Facebook
  • Partager sur Twitter
19 octobre 2016 à 13:36:32

j'essaie mais sa ne passe toujours pas..comment faite vous quand vous voulez  utiliser cela dans un ficher JSF
  • Partager sur Facebook
  • Partager sur Twitter
9 mai 2017 à 6:41:05

VincentSaby a écrit:

En français et commence par Lundi:

<script>
 $(function() {$( "#datepicker" ).datepicker({
  firstDay: 1,
  altField: "#datepicker",
  closeText: 'Fermer',
  prevText: 'Précédent',
  nextText: 'Suivant',
  currentText: 'Aujourd\'hui',
  monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
  monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
  dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
  dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
  dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
  weekHeader: 'Sem.',
  dateFormat: 'yy-mm-dd'});});
 </script>


C'est pour moi la seule solution qui a fonctionné.
  • Partager sur Facebook
  • Partager sur Twitter
20 mai 2017 à 18:09:03

Hello ,

J'arrive sur cette conversation un peu ancienne mais qui semble être toujours active.

Je suis un complet débutant avec JS et je viens tout juste de m'inscrire sur ce portail. Le développement Web est quelque chose que je découvre à peine.

Voilà, je passe à mon problème. Après avoir implementé les solutions proposées ci-dessus, il me reste un comportement très bizarre et je ne sais pas comment m'y prendre pour le debuger.

Le calendrier est correctement affiché, avec le premier jour de la semaine le lundi. En revanche, les numéros ne changent pas quand je passe du défault vers fr. Du coup, il y a un delta d'un jour entre la date et le jour de la semaine dans l'en-tête. En lisant les echanges précédentes, il me semble que personne n'a eu ce problème.

Ci-dessous un exemple. En mai 2017, le 21 c'est un Dimanche, pas un lundi.
Le problème se présente seulement en fr. Par défault, en anglais, tout fonctionne correctement.
Une personne pourrait m'aider?

Merci d'avance!

  • Partager sur Facebook
  • Partager sur Twitter
9 août 2020 à 2:05:50

Bonjour,

j'ai trouvé une solution qui marche :

1) Télécharger le fichier datepicker-fr.js à partir de la page suivante sur jqueryui.com

(j'ai du enregistrer la page complète pour récupérer le fichier js)

2) Insérer entre les balises heads :

<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.min.js"></script> <script type="text/javascript" src="../js/datepicker-fr.js"></script>

3) Insérer après la balise body :

<input type='text' id='datepicker' >

  <script type='text/javascript' >
  $( function() {
    // Initialize and change language to french
    $('#datepicker').datepicker( $.datepicker.regional[ "fr" ] );
  });
  </script>



-
Edité par nuitsblanches 9 août 2020 à 2:07:55

  • Partager sur Facebook
  • Partager sur Twitter
25 janvier 2024 à 11:06:17

Bonjour,

Voici le code complet si cela peut aider quelqu'un :

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script><br><script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<script type="text/javascript" src="https://jqueryui.com/resources/demos/datepicker/i18n/datepicker-fr.js"></script>

  <script type='text/javascript' >

  $( function() {

    // Initialize and change language to french

    $('#dp1706176335632').datepicker( $.datepicker.regional[ "fr" ] );

  });

  </script>

</head>

<body>

<input type='text' id='dp1706176335632' >

</body>

</html> 



-
Edité par JeanPïerre 25 janvier 2024 à 11:24:04

  • Partager sur Facebook
  • Partager sur Twitter
25 janvier 2024 à 12:26:27

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe de modération. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.

Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

  • soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
  • soit de créer un nouveau sujet décrivant votre propre contexte
  • ne pas répondre à un déterrage et le signaler à la modération
  • Partager sur Facebook
  • Partager sur Twitter

Pas d'aide concernant le code par MP, le forum est là pour ça :)