Datepicker afficher une value

Version imprimable

14/02/2013, 09h57
junior2386

Datepicker afficher une value

Bonjour,

J'ai mis en place un datepicker, c'est hyper simple par contre au chargement de ma page j'aurais aimé renseigner la valeur de mon champs.

Seulement depuis j'ai mis en place mon datepicker le champs est vide ...

Hors mis en JS y a t'il une règle pour renseigner la valeur de mon champs ?? Car

Code:

value="quelque chose"

ne marche pas.

Est ce normal ??

Merci
14/02/2013, 10h06
Bovino

Utilise l'attribut placeholder.
Certains utilisateurs ne verront pas la valeur, mais pour la majorité, ce sera bon.
14/02/2013, 10h11
junior2386

Merci,

Le soucis c'est que la plus part des personnes qui auront à utiliser ma page web ne seront pas compatible HTML5 j'en ai peur ...

C'est un "problème" connu avec le datepicker ou je dois chercher une erreur éventuelle de mon coté ??

EDIT : de plus à l'envoie du formulaire à prioris ça ne récupère pas la valeur avec placeholder
14/02/2013, 10h16
Bovino

:koi:

Un utilisateur n'a pas à être "compatible HTML5"...
C'est toi qui décide si ta page est en HTML5 ou non, en déclarant le bon doctype.

Bon, ceci dit, le widget t'offre une solution avec l'option appendText.
14/02/2013, 10h23
junior2386

Ah pardon alors je dis une boulette je pensais que les ancien navigateur ne supportais pas le HTML5 ...

appendtext ne me servira malheureusement pas
14/02/2013, 10h32
Bovino

Techniquement, c'est plus subtil : tous les navigateurs reconnaissent le doctype HTML5, mais tous les navigateurs n'implémentent pas les fonctionnalités du HTML5.
Pour placeholder, IE9 et inférieurs ne l'implémente pas, mais ça correspond actuellement à moins d'un tiers des utilisateurs il me semble.
14/02/2013, 10h33
junior2386

Ok on est d'accord alors ...

Ce qui ne règle pas mon problème de value :lol:

Sinon j'ai une solution temporaire si je n'en trouve pas d'autre :
Code:

1 2 3 4 5 $( ".datepicker" ).datepicker({ showOn: "button", buttonImage: "https://addons.cdn.mozilla.net/img/uploads/addon_icons/368/368853-64.png?modified=1353718475", buttonImageOnly: true });
Mettre le datepicker sur l'appui d'une image.

Citation:

Envoyé par junior2386

Code:

value="quelque chose"

ne marche pas.

Si, exemple :

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
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		head.js( 
			"http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js", 
			"http://code.jquery.com/jquery-1.9.1.min.js",
			"http://code.jquery.com/jquery-migrate-1.1.0.js",
			"http://code.jquery.com/color/jquery.color-2.1.1.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js",
			"https://raw.github.com/janl/mustache.js/master/mustache.js",
			"https://raw.github.com/jonnyreeves/jquery-Mustache/master/jquery.mustache.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js"
		);
 
		/*
		 * "http://cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js"
		 * "http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"
		 * "http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.0.6/jquery.mousewheel.min.js"
		 */
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/sunny/jquery-ui.css">
	<style>
		/* TEST */
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
		<p>
			Date: <input type="text" id="datepicker" value="un texte">
		</p>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-02-01T22:59:24.468+01:00" pubdate>2013-02-01T22:59:24.468+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script>	
		"use strict";
 
		head( function(){ // Voir : http://headjs.com/
 
			$( function(){
 
				// debug
				$.Mustache.options.warnOnMissingTemplates = true;
 
				/*
				 * Début code du test
				 */
 
				$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
 
				$( "#datepicker" ).datepicker({
					showOn : "button",
					buttonImage : "http://danielhagnoul.developpez.com/images/calendar.gif",
					buttonImageOnly : true,
			        showWeeks : true,
			        changeMonth : true,
			        changeYear : true,
			        showButtonPanel : true,
			        onSelect : function( dateStr, ObjPicker ){
			        	// this est l'input
 
			            console.log( dateStr );
			        },
			        onClose : function( dateStr, ObjPicker ){
			        	// this est l'input
 
			        }
				});
 
				/*
				 * Fin code du test
				 */
 
				// debug
				console.log( $.Mustache.templates() );
			});
 
			$( window ).load( function(){
 
			});
 
		});		
	</script>
</body>  
</html>

14/02/2013, 11h12
junior2386

Effectivement ... ça viens du fait que j'ai mon datepicker dans une boite de dialogue ??

Je vais continuer à chercher mais c'est bizarre tout ça.