Afficher deux datepickers

Version imprimable

Bonjour
je débute en java avec un premier essai avec datepicker : je souhaite pouvoir choisir 2 dates et les afficher entant que variable avec un bouton.

j'arrive bien à utiliser mes 2 datepickers, idem pour le bouton, mais dans la fonction datepicker je sauvegarde la date dans selectedDate1, comment sauvegarder mes 2 dates distincts?
Merci

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
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
 
<script>
  $(function() {
    $(".datepicker").datepicker({ 
	monthNames: ['Janvier','Fevrier','Mars','Avril','Mai','Juin','Juillet','Aout','Septembre','Octobre','Novembre','Decembre'],
  	monthNamesShort: ['Jan','Fev','Mar','Avr','Mai','Jun','Jul','Aoû','Sep','Oct','Nov','Dec'],
	dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
  	dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
  	dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa'],
	dateFormat: 'DD dd MM yy', firstDay: 1,
	onSelect: function(date) {selectedDate1 = date},
	});
  });
</script>
 
</head>
<body>
 
<p>Date: <input type="text" name="date" id="datepicker" class="datepicker"></p>
<p>Date: <input type="text" name="date2" id="datepicker2" class="datepicker"></p>
 
<button onclick="ClicBouton();">Analyse</button>
<script type="text/javascript">
   function ClicBouton(){
      alert("date1:"+selectedDate1+"-date2:"+selectedDate1);
   }
</script> 
</body>
</html>

Bonjour,
pourquoi ne pas faire un simple

Code:

1
2
3
4
   function ClicBouton(){
      alert("date1:" +$('#datepicker').val());
      alert("date2:" +$('#datepicker2').val());
   }

15/02/2016, 21h32
Sim88

En effet plus simple! merci
Question subsidiaire : est il possible dans la fonction ClicBouton d'afficher directement ces variables dans la page et non pas sous forme d'alerte. J'ai essayé System.out.println(...); mais sans succès.
15/02/2016, 21h59
NoSmoking
Citation:

J'ai essayé System.out.println(...);

ne te trompe pas de langage.

Citation:

dans la fonction ClicBouton d'afficher directement ces variables dans la page

je ne vois pas trop l'intérêt attendu que tu les as dans les champs INPUT
en ayant par exemple dans ton HTML
Code:

1 2 <span id="date_1"></span> <span id="date_2"></span>
tu peux faire
Code:

1 2 3 4 function ClicBouton(){ $('#date_1').text( $('#datepicker') .val()); $('#date_2').text( $('#datepicker2').val()); }
sinon tu peux encore exploiter l’événement onClose des datepicker.
15/02/2016, 22h38
Sim88

En fait, j'ai du mal à faire le lien entre ce bout de programme qui me récupère les 2 dates en Javascript et un autre programme externe en php qui à partir de ces 2 dates me liste les commandes passées sur un site de vente.
En php, j'arrive à bidouiller mais en Java je galère plus ... peux tu m'aider? merci
16/02/2016, 10h15
NoSmoking

Citation:

En php, j'arrive à bidouiller mais en Java je galère plus ...

il y a un excellent forum Java sur ce site ;)
16/02/2016, 13h20
kakashi99

Salut,

@NoSmoking je pense que Sim88 confond java et javascript, depuis son premier post il mélange les deux. enfin c'est comme ça que je le comprends...

Sim88 si tu veux que l'on t'aide il faut exposer clairement ton problème.

Citation:

j'ai du mal à faire le lien entre ce bout de programme qui me récupère les 2 dates en Javascript et un autre programme externe en php qui à partir de ces 2 dates me liste les commandes passées sur un site de vente.

qu'est-ce que tu ne comprends pas ? tu n'arrives pas à envoyer tes dates coté serveur (php) ?
16/02/2016, 18h07
Sim88

En effet, j'aimerais avec le programme présenté au dessus (placé dans un site de vente en ligne) pouvoir appeler une autre page php qui liste et filtre les commandes passées entre 2 dates.
Les 2 dates seront donc mise en variables pour la page php

pour java/javascript, je confirme, je ne me suis jamais trop plongé dedans, en arrivant généralement à faire l'équivalent en php

Salut,

J'avais fais un petit exercice avec datepicker qui devrait pouvoir te servir :

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
<?php
$form = filter_input(INPUT_POST, 'ok');
if($form)
{
        foreach ($_POST['date'] as $key => $date)
        {
                try
                {
                        if(trim($date) == false)
                        {
                                throw new Exception('Date_Vide');
                        }
                       
                        $d = new DateTime($date);
                        $d = $d->format('Y-m-d');
                        echo 'date '.$key.' = '. $d;
                        echo '<br>';
                }
                catch(Exception $e)
                {
                        $erreur = $e->getMessage();
                        echo $erreur == 'Date_Vide' ? 'date '.$key.' = Date vide' : 'date '.$key.' = Erreur de date';
                        echo '<br>';
                }
        }
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Localize calendar</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.11.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(function()
{                  
        var datepicker = function(saisie,envoi)
        {
                saisie.datepicker({
                monthNames: [ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre" ],
                dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
                dayNamesMin: [ "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa" ],
                dateFormat: "DD d MM yy"
                })
                .on('change', function()
                {
                        var date = $(this).datepicker( "getDate" );
                        date = $.datepicker.formatDate("yy-mm-dd", date);
                        envoi.val(date);
                })
        }
 
 
        var form = $('#form1').find("form");
        var saisie = form.find("input[data-picker=picker]");
        var envoi = form.find("input[data-picker=date]");
 
        if(saisie.length == envoi.length)
        {
                saisie.each(function(i)
                {
                        datepicker($(this),$(envoi[i]));
 
                });
        }
        else
        {
                alert('Le nombre de champs de saisie ayant l\'attribut data-picker="picker" est différent du nombre de champs d\'envoi des données ayant l\'attribut data-picker="date"')
        }
});
</script>
</head>
<body>
    <div id = "form1">
        <form ation = "#" method="post">
 
            <label><span style=" text-decoration:underline">Date 0</span> <input type="text" data-picker="picker" style="width:180px"></label>
            <input name="date[]" data-picker="date" type="hidden"  value="">
 
            <label><span style=" text-decoration:underline">Date 1</span> <input type="text" data-picker="picker" style="width:180px"></label>
            <input name="date[]" data-picker="date" type="hidden"  value="">
 
             <label><span style=" text-decoration:underline">Date 2</span> <input type="text" data-picker="picker" style="width:180px"></label>
            <input name="date[]" data-picker="date" type="hidden"  value="">
 
           <input name="ok" type="submit" value = "envoyer">
 
       </form>
   </div>
</body>
</html>

Cet exemple comporte plusieurs champs datepicker, et les dates sont saisies au format français avec un retour de date au format sql ce qui te permettras de faire tes requêtes facilement.

17/02/2016, 10h24
Sim88

merci ça correspondant dans le principe à ce que je souhaite faire. Je regarde ça en détails.
Merci encore