Format de date pour Datepicker

Version imprimable

Bonjour,

J'ai crée un formulaire dans lequel je rempli les deux champs qui utilise un datepicker, une date de départ et une date de fin.

Mon résultat s'affiche bien, mais le format des dates des datepicker s'affiche en anglais (ex : Thu May 07 2014), j'aurais donc aimé pouvoir changer ce format (07/05/2014) et pour le moment, je n'y arrive pas.

J'aurais besoin de l'aide de quelqu'un pour m'aider.

En vous remerciant.

Voici le code que j'utilise pour le moment.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function showDays() { var start = $('.date_debut').datepicker('getDate'); var end = $('.date_fin').datepicker('getDate'); if (!start || !end) return; var days = (end - start) / 1000 / 60 / 60 / 24; days = days + 1; $('.date_debut').val(start); $('.date_fin').val(end); $('.resultat').val(days); } $('.date_debut').datepicker({ onSelect: showDays }); $('.date_fin').datepicker({ onSelect: showDays });

13/05/2014, 10h22
Spartacusply

5 secondes de recherche dans la doc officielle et tu avais ta réponse...

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

:roll:

Je vous remercie bien de vouloir m'aider Spartacusply.

A vrai dire, cela n'a pas marcher et mon fichier jquery UI est déjà en français (je dis cela pour information ^^).

Cependant, je viens de remarquer une chose : Si dans mon code j'enlève le 'get date' (pour tester) comme le code ci-dessous, mon résultat est bel et bien au format "dd-mm-yy", mais le résultat renvoyé m'affiche NaN et donc le calcul ne se fait pas.

Comment puis-je arriver à avoir comme format "dd-mm-yy" tout en ayant mon calcul de fait, car la solution de Spartacusply n'a pas fonctionner dans mon cas.

En vous remerciant,

Nadir
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 function showDays(){ var start = $('.date_debut').val(); var end = $('.date_fin').val(); if (!start || !end) return; var days = (end - start) / 1000 / 60 / 60 / 24; days = days + 1; $('.date_debut').val(start); $('.date_fin').val(end); $('.resultat').val(days); } $('.date_debut').datepicker({ onSelect: showDays }); $('.date_fin').datepicker({ onSelect: showDays }); $(document).ready(function(){ $(".date_debut").on("focus", function(){ $(".date_debut").val(""); }); $(".date_fin").on("focus", function(){ $(".date_fin").val(""); }); $(".resultat").on("focus", function(){ $(".resultat").val(""); }); $(".reset").on("click", function(event){ $(".date_debut").val(""); $(".date_fin").val(""); $(".resultat").val(""); }); });

As tu bien tenu compte de cette ligne de script :

Code:

<script src="jquery.ui.datepicker-fr.js"></script>

ce qui revient à insérer ce code dans tons script :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    $.datepicker.regional['fr'] = {
        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', 'Ma', 'Me', 'J', 'V', 'S'],
        weekHeader: 'Sem.',
        dateFormat: 'dd/mm/yy',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: ''
    };
    $.datepicker.setDefaults($.datepicker.regional['fr']);

Sinon en effet ça ne peut pas marcher...

J'ai réussi, merci encore à vous Spartacusply.

Voici le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function showDays()
{
	var dateObject = $(".date_debut").datepicker("getDate");
	var dateObject2 = $('.date_fin').datepicker('getDate');
	if (!dateObject || !dateObject2) return;
	var days = (dateObject2 - dateObject) / 1000 / 60 / 60 / 24;
	days = days + 1;
	var start = $.datepicker.formatDate("dd-mm-yy", dateObject);
	var end = $.datepicker.formatDate("dd-mm-yy", dateObject2);
	$('.date_debut').val(start);
	$('.date_fin').val(end);
	$('.resultat').val(days);
}
$('.date_debut').datepicker({ onSelect: showDays });
$('.date_fin').datepicker({ onSelect: showDays });
 
$(document).ready(function() 
{
    $(".date_debut").on("focus", function(){ $(".date_debut").val(""); });
	$(".date_fin").on("focus", function(){ $(".date_fin").val(""); });
	$(".resultat").on("focus", function(){ $(".resultat").val(""); });
    $(".reset").on("click", function(event)
	{
		$(".date_debut").val("");
		$(".date_fin").val(""); 
		$(".resultat").val(""); 
	});
});

Il fallait changer le format grâce à la fonction formatDate et réaliser cela après le calcul de la différence entre les deux dates.