Afficher deux datepickers

**Sim88** · 15/02/2016, 10h39

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 :

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
<!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>

**NoSmoking** · 15/02/2016, 18h57

Bonjour,
pourquoi ne pas faire un simple

Code :

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

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

**Sim88** · 15/02/2016, 21h32

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.

**NoSmoking** · 15/02/2016, 21h59

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

ne te trompe pas de langage.

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 html :

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

1
2
<span id="date_1"></span>
<span id="date_2"></span>

tu peux faire

Code :

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

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.

**Sim88** · 15/02/2016, 22h38

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

**NoSmoking** · 16/02/2016, 10h15

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

il y a un excellent forum Java sur ce site

**kakashi99** · 16/02/2016, 13h20

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.

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) ?

**Sim88** · 16/02/2016, 18h07

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

**ABCIWEB** · 16/02/2016, 18h22

Salut,

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

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
<?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.

**Sim88** · 17/02/2016, 10h24

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

Afficher deux datepickers

jQuery

Discussions similaires

Partager

Partager