Valeur NaN sur le champ date liée à la méthode datepicker de jquery

**serigne** · 29/06/2015, 15h43

Bonjour,

Pour simplifier la saisie de date sur le champ date, j;ai utilise la methode jquery

par ceci

Code html :

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

1
2
3
4
<div id="date_facture1">
<label for="date_facture">Date Facture :</label>
  <input  type ="text"  id="datepicker" />
   </div>

et ceci

Code :

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

1
2
3
4
5
6
7
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
  $( "#datepicker").datepicker();
 });
 </script>

Le calendrier apparait bien mais apres a voir choisi une date, on a ca sur le champ date

Code :

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

NaN/NaN/NaN

Pourquoi la date n'apparait pas ?

Merci de vos contributions

**SpaceFrog** · 29/06/2015, 17h19

tu dois avoir un souci ailleurs, car un test fiddle avec les versions utilisées fonctionne
http://fiddle.jshell.net/1gdrmLsn/

**serigne** · 30/06/2015, 17h23

Merci pour la réponse

mais ça marche toujours pas. je me demande si c'est pas un problème de feuille de style.

**serigne** · 30/06/2015, 17h48

Bon c'est bon ça marche bien avec Chrome et Internet Expolorer mais pas avec Firefox chez moi.

La fonction datepicker() de jquery n'est-il pas compatible avec firefox ?

**danielhagnoul** · 30/06/2015, 22h00

Si !

Sans un lien vers la page web ou la totalité des codes (CSS, HTML, JS), il est impossible de tester le problème.

On ne peut donc que répéter :

Envoyé par SpaceFrog

tu dois avoir un souci ailleurs, ...

**serigne** · 01/07/2015, 15h22

voici le code html

Code :

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

1
2
3
4
5
6
7
8
9
10
<form name ="form_factures">
 <div id="nom_factures1">
 <label for="Num_facture">Numero facture :</label>
 <input type="text" name="Num_facture" id="Num_facture" />
 </div>
<div id="date_facture1">
<label for="date_facture">Date Facture :</label>
 <input type="text" id="datepicker" />
  </div>
</form>

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
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>

// Pour mettre le calendrier en langue francaise

$.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','M','M','J','V','S'],
 weekHeader: 'Sem.',
 dateFormat: 'dd/mm/yy',
 firstDay: 1,
 isRTL: false,
 showMonthAfterYear: false,
 yearSuffix: ''};
 $.datepicker.setDefaults($.datepicker.regional['fr']);
 $(function() {
 $( "#datepicker" ).datepicker();
  });
</script>

c'est au niveau du navigateur Firefox que ça ne fonctionne pas ?

**SpaceFrog** · 01/07/2015, 15h33

tu en as plusieurs comme ça ?

Code :

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

<input type="text" id="datepicker" />

**serigne** · 01/07/2015, 17h56

J'ai pas trop compris la question ?

Sinon non c'est le seul élément Date au niveau de la page. J'en ai pas plusieurs.

**danielhagnoul** · 01/07/2015, 23h19

Faites un test avec ce code :

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
    <meta http-equiv="cache-control" content="public, max-age=60">
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
    <meta name="author" content="Daniel Hagnoul">
    <title>Test</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css">
    <style>
 
    </style>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
        "use strict";
 
        $( function(){ // forme abrégée de $(document).ready(function(){
 
            $.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','M','M','J','V','S'],
                weekHeader: 'Sem.',
                dateFormat: 'dd/mm/yy',
                firstDay: 1,
                isRTL: false,
                showMonthAfterYear: false,
                yearSuffix: ''
            };
 
            $.datepicker.setDefaults( $.datepicker.regional['fr'] );
 
            $( "#datepicker" ).datepicker();
 
        });
 
        $( window ).load( function(){
 
        });
    </script>
</head>
<body>
 
    <form name ="form_factures">
        <div id="nom_factures1">
            <label for="Num_facture">Numero facture :</label>
            <input type="text" name="Num_facture" id="Num_facture" />
        </div>
        <div id="date_facture1">
            <label for="datepicker">Date Facture :</label>
            <input type="text" id="datepicker" />
        </div>
    </form>
 
</body>
</html>

**serigne** · 02/07/2015, 16h50

Merci pour le code,

çà marche nickel sauf pour le navigateur Firefox ????

**danielhagnoul** · 02/07/2015, 23h28

Mon code fonctionne très bien avec Firefox. J'ai testé avec la version 38.0.5.

Je vous conseille de désinstaller et de réinstaller le navigateur avant de faire un nouvel essai.

**serigne** · 05/07/2015, 03h02

Merci pourtant j'ai la dernière version 39.0 et je pense c'est la dernière version et ça montre bien le calendrier mais ça affiche Nan/Nan/Nan

**ABCIWEB** · 05/07/2015, 03h41

Moi aussi j'ai la version 39.0 de firefox et le code de danielhagnoul fonctionne correctement. Si je clique sur une date dans le calendrier elle est bien reportée dans l'input de saisie.

**serigne** · 06/07/2015, 00h56

Bonjour,

Je vous donne mon code

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
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html>
<?php
include("connection.php");
   $bdd_facture =connectMaBase();
?>
  <head>
  <meta http-equiv="cache-control" content="public, max-age=60">
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
   <link rel="stylesheet" href="commerce.css" />
       <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css">
   <style>
 
    </style>
   </head>
 
    <body>
   <header>
 
 <h1>Ajouter une facture</h1>
  </header>
  <nav>
 </nav>
  <section>
  <aside>
 </aside>
 <article>                
<form name ="form_factures">
  <div id="nom_factures1">
  <label for="Num_facture">Numero facture :</label>
 <input type="text" name="Num_facture" id="Num_facture" />
 </div>
	<div id="date_facture1">
   <label for="datepicker">Date Facture :</label>
            <input type="text" id="datepicker" />
        </div>
    <div id="fournisseur_facture1">
 
   <label for="fournisseur_facture">Fournisseur :</label>
 
 <select name="facture_fournisseur" id="facture_fournisseur"  >
	 <?php
                                  
 $bdd_facture =connectMaBase();
                                         
                                         
         $reponse1 = $bdd_facture->query('SELECT Id_fournisseur ,Nom_fournisseur FROM fournisseurs');
 
while ($donnees1 = $reponse1->fetch())
{
        echo '<option value="'.$donnees1['Id_fournisseur'].'">'.$donnees1['Nom_fournisseur'].'</option>';
 
                                                           
}
 
$reponse1->closeCursor();                               
                                         ?>
	 </select>
 </div>
	 <div id="article_facture">
	<table align="center" id="idtabaert">
	<caption>Les articles</caption>
	 <tr>
	<td> <select name="facture_article" id="facture_article" class="myLists">
 
      <?php
                                                         
        $reponse = $bdd_facture->query('SELECT  Id_article, Designation FROM articles');
 
while ($donnees = $reponse->fetch())
{
        echo '<option value="'.$donnees['Id_article'].'">'.$donnees['Designation'].'</option>';
 
                                                           
}
 
$reponse->closeCursor();                                           
                                                           
 
                              
 
?>
 
</select></td>
	  </tr>
	</table>
	</div>
	 <div id="ajt_article1">
	<input type="button" name="ajt_article" id="ajt_article" value="Ajout des articles"   />
  </div>			  		   
 	 <div id="bt_fact">
 
	 <input type="button" name="valider_fact" id="valider_fact" value="Envoyer"  />
	   </div>
 
	 </form>
	   </article>
  </section>
 
     <footer>
        </footer>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
        "use strict";
 
        $( function(){ // forme abrégée de $(document).ready(function(){
 
            $.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','M','M','J','V','S'],
                weekHeader: 'Sem.',
                dateFormat: 'dd/mm/yy',
                firstDay: 1,
                isRTL: false,
                showMonthAfterYear: false,
                yearSuffix: ''
            };
 
            $.datepicker.setDefaults( $.datepicker.regional['fr'] );
 
            $( "#datepicker" ).datepicker();
 
        });
 
        $( window ).load( function(){
 
        });
   </script>
    </body>
 
</html>

mais ca rapporte toujours Nan/Nan/Nan au champ datepicker

**ABCIWEB** · 06/07/2015, 01h45

Déjà quand tu fais un copier collé du code de danielhagnoul et que tu teste dans une page vierge (ne contenant que ce code), cela fonctionne-t-il ? Cela t'indiquerais si ton navigateur a des problèmes ou si c'est l'intégration dans ton code.

Et puis je vois que ton code contient deux fois de suite ces deux lignes :

Code :

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

1
2
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Une fois est suffisant.

**danielhagnoul** · 06/07/2015, 12h49

Envoyé par ABCIWEB

Code :

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

1
2
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Il s'agit de jQuery et de jQuery UI, sans UI pas de Datepicker.

**serigne** · 06/07/2015, 13h39

Envoyé par ABCIWEB

Déjà quand tu fais un copier collé du code de danielhagnoul et que tu teste dans une page vierge (ne contenant que ce code), cela fonctionne-t-il ? Cela t'indiquerais si ton navigateur a des problèmes ou si c'est l'intégration dans ton code.

Et puis je vois que ton code contient deux fois de suite ces deux lignes :

Code :

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

1
2
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Une fois est suffisant.

Bonjour,

Je l'avais pourtant déjà fait mais ça ne fonctionnait pas , j'avais oublie de vous le dire.
Donc j'ai copié le code de danielhagnoul dans une page vierge mais en le testant, ce rapporte toujours Nan/Nan/Nan au champ input

D’où je peux tirer sans me tromper que c'est un problème au niveau de mon navigateur ?

**ABCIWEB** · 06/07/2015, 16h51

Envoyé par danielhagnoul

Il s'agit de jQuery et de jQuery UI, sans UI pas de Datepicker.

Oui mais je disais que ces deux lignes sont répétées deux fois de suite à l'identique dans son code :

Code :

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

1
2
3
4
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

**serigne** · 06/07/2015, 19h22

ok sans doute je les ai enlevé mais çà na pas résolu le problème

**ABCIWEB** · 06/07/2015, 22h53

A part désinstaller et réinstaller firefox (comme déjà dit) je vois pas trop quoi faire d'autre.

Valeur NaN sur le champ date liée à la méthode datepicker de jquery

jQuery

Discussions similaires

Partager

Partager