UI Datepicker => date tout en lettre ?

**krislec** · 05/12/2010, 20h27

Est-il possible de récupérer une date (via datepicker -> format date) de façon à l'avoir tout en lettre ?
ex: "Dimanche cinq décembre 2010"

**danielhagnoul** · 06/12/2010, 01h04

Bonsoir

On peut toujours reformuler la date choisie par l'utilisateur.

Voici un exemple pour les six premiers jours du mois, il vous suffira de compléter jusqu'à 31 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" type="text/css" href="../lib/jqueryui/css/humanity/jquery-ui-1.8.6.custom.css">	
	<style>
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
		#date {
			width:240px;
			margin:12px;
		}
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
 
<div>
	<p>Je me suis arrêté à six, mais il faut aller jusqu'à 31 !</p>
	<input id="date" type="text" />
</div>
 
	</div>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-ui-1.8.6.custom.min.js"></script>
	<script>
		$(function(){
 
/* French initialisation for the jQuery UI date picker plugin. */
/* Written by Keith Wood (kbwood{at}iinet.com.au) and Stéphane Nahmani (sholby@sholby.net). */
$.datepicker.regional['fr'] = {
	closeText: 'Fermer',
	prevText: '&#x3c;Préc',
	nextText: 'Suiv&#x3e;',
	currentText: 'Courant',
	monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin',
	'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
	monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jun',
	'Jul','Aoû','Sep','Oct','Nov','Déc'],
	dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
	dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
	dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa'],
	weekHeader: 'Sm',
	dateFormat: 'DD, d MM yy',
	firstDay: 1,
	isRTL: false,
	showMonthAfterYear: false,
	yearSuffix: ''
};
 
$.datepicker.setDefaults($.datepicker.regional['fr']);
 
/*
 * Je me suis arrêté à six, mais il faut aller jusqu'à 31 !
 */
var days = ["premier", "deux", "trois", "quatre", "cinq", "six"];
 
$('#date').datepicker({
	"onClose": function(dateText, inst){
		$("#date").val(dateText.replace(/[0-9]{1,2}/, days[inst.selectedDay - 1]));
	}
});
 
		});
	</script>
</body>  
</html>

**krislec** · 06/12/2010, 23h27

QUE DU BONHEUR !!!

mais je vais chippoter un peu....

je voudrais supprimer la virgule qui apparait après le jour choisi:

Dimanche, cinq décembre 2010

et avoir :

Dimanche cinq décembre 2010

Je sais j'abuse un peu. Y'aurait pas un "daySuffix" à définir ?

Si je pouvais également avoir quelques commentaire sur le dernière ligne:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$('#date').datepicker({
        "onClose": function(dateText, inst){
                $("#date").val(dateText.replace(/[0-9]{1,2}/, days[inst.selectedDay - 1]));
        }
});

On replace les chiffres par days ( conversion chiffres -> lettres, ok...), mais pourquoi days - 1 ?

D'ors et déjà SUPER GRAND MERCI pour cette brillante aide.

**krislec** · 06/12/2010, 23h46

Désolé j'avais pas vu le date format:

dateFormat: 'DD, d MM yy',

-> Résolu.

Si ça interesse quelq'un... j'amène ma très petite contribution !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var days = ["premier", "deux", "trois", "quatre", "cinq", "six", "sept", "huit", "neuf", "dix",
            "onze", "douze", "treize", "quatorze", "quinze", "seize", "dix-sept", "dix-huit",
            "dix-neuf", "vingt", "vingt et un", "vingt-deux", "vingt-trois", "vingt-quatre",
            "vingt-cinq", "vingt-six", "vingt-sept", "vingt-huit", "vingt-neuf", "trente",
            "trente et un"];

Encore merci.

UI Datepicker => date tout en lettre ?

jQuery

Vue hybride

Discussions similaires

Partager

Partager