Discussion :

[laurentSc]

Bonjour,

j'ai un code avec 2 champs Datepicker/Bootstrap 4, une date de début et une date de fin, et l'objectif est quand on saisie la date de début, je voudrais initialiser la date de fin avec la même valeur (ce code était au point pour un Datepicker UI). Voici mon code (on gère 2 langues)(lignes 28 à 40 pour l'initialisation). Le souci est que l'init ne se fait pas :

Code html :

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
if ($lang=="fr") {?>
	<table><tr><td><?php echo $str[302]; ?>: </td><td> 
	<input type="text" class="form-control datepicker" placeholder="sélectionnez une date"  name="datepickerd"></td><td><?php echo $str[313]; ?></td></tr>
	<tr><td><?php echo $str[303]; ?>: </td><td>
	<input type="text" class="form-control datepicker" placeholder="sélectionnez une date"  name="datepickerf"></td><td><?php echo $str[313]; ?></td></tr>
	<script>
        (function($){
        $.fn.datepicker.dates['fr'] = {
        days: ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"],
        daysShort: ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."],
        daysMin: ["d", "l", "ma", "me", "j", "v", "s"],
        months: ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"],
        monthsShort: ["janv.", "févr.", "mars", "avril", "mai", "juin", "juil.", "août", "sept.", "oct.", "nov.", "déc."],
        today: "Aujourd'hui",
        monthsTitle: "Mois",
        clear: "Effacer",
        weekStart: 1,
        format: "dd/mm/yyyy"
        };
        }(jQuery));
 
        $('.datepicker').datepicker({
        language: 'fr',
        autoclose: true,
        todayHighlight: true
        });
 
        $('#datepickerd').datepicker({ 
                dateFormat: 'dd-mm-yy', firstDay:1, minDate: new Date(),
                onSelect: function() {
                        if ( $("#datepickerf").val() == '' )
                        {
                                $('#datepickerf').val( $(this).val() );
                        }
                },
 
      changeMonth: true,
 
      changeYear: true          
        })
        </script>
 
<?php }
else {?>
<table><tr><td><?php echo $str[302]; ?>: </td><td> 
	<input type="text" class="form-control datepicker" placeholder="choose a date" name="datepickerd"></td><td><?php echo $str[313]; ?></td></tr>
	<tr><td><?php echo $str[303]; ?>: </td><td>
	<input type="text" class="form-control datepicker" placeholder="choose a date" name="datepickerf"></td><td><?php echo $str[313]; ?></td></tr>
 
<script>
(function($){
$.fn.datepicker.dates['en'] = {
days: ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"],
daysShort: ["sun.", "mon.", "tue.", "wed.", "thu.", "fri.", "sat."],
daysMin: ["su", "m", "tu", "w", "th", "f", "sa"],
months: ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"],
monthsShort: ["jan.", "feb.", "mar.", "apr.", "may", "june", "july", "aug.", "sept.", "oct.", "nov.", "dec."],
today: "Today",
monthsTitle: "Month",
clear: "Clear",
weekStart: 1,
format: "dd/mm/yyyy"
};
}(jQuery));
 
 
$('.datepicker').datepicker({
language: 'en',
autoclose: true,
todayHighlight: true
})
 
 
$('#datepickerd').datepicker({ 
        dateFormat: 'dd-mm-yy', firstDay:1, minDate: new Date(),
        onSelect: function() {
                if ( $("#datepickerf").val() == '' )
                {
                        $('#datepickerf').val( $(this).val() );
                }
        },
        changeMonth: true,
 
        changeYear: true                
        })
</script>

[Invité]

Bonjour Laurent,

tu vas SIMPLIFIER tout ça.

1- crée le fichier datepicker-langue-fr.js :

Code JavaScript :

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
$(function(){	// QUAND LE DOM EST PRET
	$.fn.datepicker.dates['fr'] = {
	days: ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"],
	daysShort: ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."],
	daysMin: ["d", "l", "ma", "me", "j", "v", "s"],
	months: ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"],
	monthsShort: ["janv.", "févr.", "mars", "avril", "mai", "juin", "juil.", "août", "sept.", "oct.", "nov.", "déc."],
	today: "Aujourd'hui",
	monthsTitle: "Mois",
	clear: "Effacer",
	weekStart: 1,
	format: "dd/mm/yyyy"
	};
 
	$('.datepicker').datepicker({
		language: 'fr',
		autoclose: true,
		todayHighlight: true
	});
});

2- crée le fichier datepicker-langue-en.js :

Code JavaScript :

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
$(function(){	// QUAND LE DOM EST PRET
	$.fn.datepicker.dates['en'] = {
	days: ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"],
	daysShort: ["sun.", "mon.", "tue.", "wed.", "thu.", "fri.", "sat."],
	daysMin: ["su", "m", "tu", "w", "th", "f", "sa"],
	months: ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"],
	monthsShort: ["jan.", "feb.", "mar.", "apr.", "may", "june", "july", "aug.", "sept.", "oct.", "nov.", "dec."],
	today: "Today",
	monthsTitle: "Month",
	clear: "Clear",
	weekStart: 1,
	format: "dd/mm/yyyy"
	};
 
	$('.datepicker').datepicker({
		language: 'en',
		autoclose: true,
		todayHighlight: true
	});
});

3- Maintenant, dans la page, il suffit d'appeler le bon fichier en fonction de la langue :

Code :

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

	<script type="text/javascript" src=".............../datepicker-langue-<?php echo $lang; ?>.js"></script>

4- Enfin, tu vas PROPREMENT INDENTER TON 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
	<script type="text/javascript" src=".............../datepicker-langue-<?php echo $lang; ?>.js"></script>
<?php
// ------------
if ($lang=="fr") { // fr
?>
	<table>
		<tr>
			<td><?php echo $str[302]; ?>: </td>
			<td><input type="text" class="form-control datepicker" placeholder="sélectionnez une date"  name="datepickerd"></td><td><?php echo $str[313]; ?></td>
		</tr>
		<tr>
			<td><?php echo $str[303]; ?>: </td>
			<td><input type="text" class="form-control datepicker" placeholder="sélectionnez une date"  name="datepickerf"></td><td><?php echo $str[313]; ?></td>
		</tr>
	</table>
 
	<script>
	$(function(){	// QUAND LE DOM EST PRET
		$('#datepickerd').datepicker({
			dateFormat: 'dd-mm-yy', firstDay:1, minDate: new Date(),
			onSelect: function() {
				if ( $("#datepickerf").val() == '' )
				{
					$('#datepickerf').val( $(this).val() );
				}
			},
		  changeMonth: true,
		  changeYear: true
		});
	});
	</script>
 
<?php
}
// ------------
else { // en
?>
	<table>
		<tr>
			<td><?php echo $str[302]; ?>: </td>
			<td><input type="text" class="form-control datepicker" placeholder="choose a date" name="datepickerd"></td><td><?php echo $str[313]; ?></td>
		</tr>
		<tr>
			<td><?php echo $str[303]; ?>: </td>
			<td><input type="text" class="form-control datepicker" placeholder="choose a date" name="datepickerf"></td><td><?php echo $str[313]; ?></td>
		</tr>
 	</table>
 
	<script>
	$(function(){	// QUAND LE DOM EST PRET
		$('#datepickerd').datepicker({
			dateFormat: 'dd-mm-yy', firstDay:1, minDate: new Date(),
			onSelect: function() {
				if ( $("#datepickerf").val() == '' )
				{
					$('#datepickerf').val( $(this).val() );
				}
			},
			changeMonth: true,
			changeYear: true
		});
	});
	</script>
<?php
}
// ------------
?>

N.B.

Code :

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

1
2
3
$(function(){	// QUAND LE DOM EST PRET
...
});

Je ne vais pas te le dire à chaque fois.

[Showie]

Salut,

Tu utilise des sélecteurs sur des ID ('#datepickerd') mais tu n'as déclaré que les NAME dans ton html.

Je ne sais pas si tu utilise une vieille version de datepicker mais pour détecter un changement de date j'utilise changeDate :

Code :

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

1
2
3
4
5
6
 
$('#datepickerd').on('changeDate',function(){
    if ( $("#datepickerf").val() == '' ) {
				$('#datepickerf').val( $(this).val() );
			}
		});

PS: Un conseil évite de dupliquer ton code pour gérer une langue la structure doit être définie une fois et la valeur des etiquettes gérée en variable.

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
 
<?php
if ($lang=="fr") {
        $placeholder = 'sélectionnez une date';
        $language = 'fr';
        $days = '"dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"';
        $daysShort= '"dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."';
        $daysMin= '"d", "l", "ma", "me", "j", "v", "s"';
        $months= '"janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"';
        $monthsShort= '"janv.", "févr.", "mars", "avril", "mai", "juin", "juil.", "août", "sept.", "oct.", "nov.", "déc."';
        $today= 'Aujourd\'hui';
        $monthsTitle= 'Mois';
        $clear= 'Effacer';
        $weekStart= 1;
        $format= 'dd/mm/yyyy';
}else {
        $placeholder = 'choose a date';
        $language = 'en';
        $days = '"sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"';
        $daysShort= '"sun.", "mon.", "tue.", "wed.", "thu.", "fri.", "sat."';
        $daysMin= '"su", "m", "tu", "w", "th", "f", "sa"';
        $months= '"january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"';
        $monthsShort= '"jan.", "feb.", "mar.", "apr.", "may", "june", "july", "aug.", "sept.", "oct.", "nov.", "dec."';
        $today= 'Today';
        $monthsTitle= 'Month';
        $clear= 'Clear';
        $weekStart= 1;
        $format= 'dd/mm/yyyy';
}
?>
<table>
	<tr>
		<td><?php echo $str[302]; ?>: </td>
		<td><input type="text" class="form-control datepicker" placeholder="<?php echo $placeholder; ?>"  name="datepickerd" id="datepickerd"></td><td><?php echo $str[313]; ?></td></tr>
	<tr>
		<td><?php echo $str[303]; ?>: </td>
		<td><input type="text" class="form-control datepicker" placeholder="<?php echo $placeholder; ?>"  name="datepickerf" id="datepickerf"></td><td><?php echo $str[313]; ?></td></tr>
</table>
<script>
	$(function(){
		$.fn.datepicker.dates[<?php echo $language; ?>] = {
		days: [<?php echo $language; ?>],
		daysShort: [<?php echo $daysShort; ?>],
		daysMin: [<?php echo $daysMin; ?>],
		months: [<?php echo $months; ?>],
		monthsShort: [<?php echo $monthsShort; ?>],
		today: "<?php echo $today; ?>",
		monthsTitle: "<?php echo $monthsTitle; ?>",
		clear: "<?php echo $clear; ?>",
		weekStart: <?php echo $weekStart; ?>,
		format: "<?php echo $format; ?>"
		};
	}(jQuery));
 
	$('#datepickerd').on('changeDate',function(){
		if ( $("#datepickerf").val() == '' ) {
			$('#datepickerf').val( $(this).val() );
		}
	});
 
</script>

[Invité]

@Showie

1- On peut tirer avantage de fichiers js externes (datepicker-langue-fr.js, datepicker-langue-en.js).
Comme le l'ai indiqué dans mon message précédent.

2- Cela dit, tu as raison : il faut tirer profit d'un "dictionnaire de langue", pour ne pas avoir à copier du code INUTILEMENT (et avec RISQUE DE SE TROMPER).

Fichier dico-langue.php :

Code :

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

1
2
3
4
5
6
7
<?php
if ($lang=="fr") {
        $dico['placeholder_choose_date'] = 'sélectionnez une date';
}else {
        $dico['placeholder_choose_date'] = 'choose a date';
}
?>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<?php require('.................../dico-langue.php'); ?>
 
	<table>
		<tr>
			<td><?php echo $str[302]; ?>: </td>
			<td><input type="text" class="form-control datepicker" placeholder="<?php echo $dico['placeholder_choose_date']; ?>"  name="datepickerd" id="datepickerd"></td><td><?php echo $str[313]; ?></td>
		</tr>
		<tr>
			<td><?php echo $str[303]; ?>: </td>
			<td><input type="text" class="form-control datepicker" placeholder="<?php echo $dico['placeholder_choose_date']; ?>"  name="datepickerf" id="datepickerf"></td><td><?php echo $str[313]; ?></td>
		</tr>
	</table>

[laurentSc]

Merci à vous 2 pour vos conseils.

En fait, le fichier dico-langue.php existe en 2 fichiers (comme je gère 2 langues) : language.fr.inc.php et language.en.inc.php.

Voici comment j'en ai tenu compte :

language.fr.inc.php

Code php :

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

1
2
3
...
$str[361]="sélectionnez une date";
...

language.en.inc.php

Code php :

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

1
2
3
...
$str[361]="choose a date";
...

datepicker_fr

Code php :

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
 
	$(document).ready(function(){
	$.fn.datepicker.dates['fr'] = {
            days: ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"],
            daysShort: ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."],
            daysMin: ["d", "l", "ma", "me", "j", "v", "s"],
            months: ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"],
            monthsShort: ["janv.", "févr.", "mars", "avril", "mai", "juin", "juil.", "août", "sept.", "oct.", "nov.", "déc."],
            today: "Aujourd'hui",
            monthsTitle: "Mois",
            clear: "Effacer",
            weekStart: 1,
            format: "dd/mm/yyyy"
        };
	}(jQuery));
 
	$('.datepicker').datepicker({
        language: 'fr',
        autoclose: true,
        todayHighlight: true
	});
 
	$('#datepickerd').on('changeDate',function(){
		if ( $("#datepickerf").val() == '' ) {
			$('#datepickerf').val( $(this).val() );
		}
	})

datepicker_en

Code php :

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
$(document).ready(function(){
$.fn.datepicker.dates['en'] = {
        days: ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"],
        daysShort: ["sun.", "mon.", "tue.", "wed.", "thu.", "fri.", "sat."],
        daysMin: ["su", "m", "tu", "w", "th", "f", "sa"],
        months: ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"],
        monthsShort: ["jan.", "feb.", "mar.", "apr.", "may", "june", "july", "aug.", "sept.", "oct.", "nov.", "dec."],
        today: "Today",
        monthsTitle: "Month",
        clear: "Clear",
        weekStart: 1,
        format: "dd/mm/yyyy"
    };
}(jQuery));
 
 
$('.datepicker').datepicker({
    language: 'en',
    autoclose: true,
    todayHighlight: true
})

add_event.php

Code php :

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
<table>
	<tr>
		<td><?php echo $str[302]; ?>: </td>
		<td> <input type="text" class="form-control datepicker" placeholder="<?php echo $str[361]; ?>" id="datepickerd" name="datepickerd"></td>
		<td><?php echo $str[313]; ?></td>
	</tr>
	<tr>
		<td><?php echo $str[303]; ?>: </td>
		<td><input type="text" class="form-control datepicker" placeholder="<?php echo $str[361]; ?>" id="datepickerf" name="datepickerf"></td>
		<td><?php echo $str[313]; ?></td>
	</tr>
</table>
 
<script>
	<?php include "datepicker_".$lang."js"; ?>
</script>

Encore des soucis

Quand je clique sur un champ de date, il ne me propose plus un calendrier, mais une liste de dates (8 pour le 1er champ et 5 pour le 2e) ; la saisie du 1er champ n'initialise pas le 2e. Et si je regarde le code source de la page, ça commence par :

Code html :

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

1
2
3
4
5
6
7
<script type="text/javascript" src="datepicker_fr.js"></script>
 
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
...

donc l'insertion du fichier js faite dans add_event à la ligne 15 arrive avant le <html> !

[Invité]

Code :

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

1
2
3
4
$str[361]
$str[358]
$str[925]
...

Ça n'a AUCUNE signification "compréhensible" !

Alors que :
$str['placeholder_choose_date'] a une RÉELLE signification : on sait tout de suite à quoi ça se réfère.


FAIS comme je l'ai conseillé : DEUX fichiers, en fonctions de la langue !

1- site-langue-fr.php :

Code :

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

1
2
3
<?php
$dico['placeholder_choose_date'] = 'sélectionnez une date';
?>

2- site-langue-en.php :

Code :

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

1
2
3
<?php
$dico['placeholder_choose_date'] = 'choose a date';
?>

3- Et il suffit d'appeler le "bon" fichier langue.

Code :

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

<?php require('.................../site-langue-'.$lang.'.php'; ?>

[Invité]

...Quand je clique sur un champ de date, il ne me propose plus un calendrier...

Arrête d'écrire n'importe quoi, n'importe comment : RÉFLÉCHIS !
Tu économiseras du temps. *


* Et nous, des cheveux...