[datepicker] Initialiser le 2e champ date en fonction du 1er

**laurentSc** · 03/05/2019, 10h26

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é · 03/05/2019, 13h39

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** · 03/05/2019, 13h40

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é · 03/05/2019, 13h56

@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** · 03/05/2019, 20h07

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é · 03/05/2019, 20h38

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é · 03/05/2019, 20h49

Envoyé par laurentSc

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

**laurentSc** · 04/05/2019, 11h45

Envoyé par jreaux62

* Et nous, des cheveux...

Quand t'auras plus de cheveux, je te paye une perruque

J'ai beau réfléchir, je n'arrive pas à corriger. J'ai écrit un codepen qui reproduit le problème : https://codepen.io/laurentsc/pen/joNpBB

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
<form action="enterdata.php?lang='fr' method='POST'">
 
<span>Sélectionner l'événement :</span>
<select name="event" size="1"><option>Formation</option><option>Déplacement</option><option>Congés</option></select>
<table>
	<tr>
		<td>Date de début : </td>
		<td><input type="text" class="form-control datepicker" placeholder="sélectionnez une date" id="datepickerd" name="datepickerd"></td>
		<td>si saisie manuelle, format JJ/MM/AAAA</td>
	</tr>
	<tr>
		<td>Date de fin : </td>
		<td><input type="text" class="form-control datepicker" placeholder="sélectionnez une date " id="datepickerf" name="datepickerf"></td>
		<td>si saisie manuelle, format JJ/MM/AAAA</td>
	</tr>
</table>
 
 
 
 
<br/><input type="submit" value="OK">
 
</form>

Code js :

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
 
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js
 
https://code.jquery.com/jquery-3.4.0.min.js
 
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js
 
https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.js
 
$(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() );
			}
		})

Invité · 04/05/2019, 12h21

C'est quoi, ce "Code js" chelou ?

Je t'ai donné tout le code CORRIGÉ !
Tu ne sais pas faire de copier-coller ??

Comment veux-tu progresser si tu reproduis sans arrêt les mêmes erreurs...

On ne peut pas t'aider si tu ne tiens pas compte de nos conseils et CORRECTIONS.

N.B. Ton codepen est "foireux" parce que tu n'as pas respecté l'ordre d'appel des fichiers JS externes.

**laurentSc** · 04/05/2019, 18h45

Il vient de ces 2 codes de Datepicker (fr et en) : https://codepen.io/laurentsc/pen/joNpBB et https://codepen.io/laurentsc/pen/eaOXVM qui fonctionnent tout seuls mais pas intégrés dans mon site. As-tu mieux ?

Invité · 04/05/2019, 19h47

As-tu relu ce que j'ai écrit ?
As-tu repris mes codes ?
As-tu corrigé les tiens ?

Non.

**laurentSc** · 04/05/2019, 21h12

J'ai relu les discussions antérieures.
T'as raison ; si je corrige l'ordre d'appel des fichiers js, mon codepen n'est plus foireux.

Pourtant, même en faisant attention à ça (et tes précédents conseils), mon code est encore "foireux".

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
 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>  
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
 
<table>
	<tr>
		<td><?php echo $str['Date_of_beginning']; ?>: </td>
		<td><input type="text" class="form-control datepicker" placeholder="<?php echo $str['choose_a_date']; ?>" id="datepickerd" name="datepickerd"></td>
		<td><?php echo $str['format_date']; ?></td>
	</tr>
	<tr>
		<td><?php echo $str['Date_of_end']; ?>: </td>
		<td><input type="text" class="form-control datepicker" placeholder="<?php echo $str['choose_a_date']; ?> " id="datepickerf" name="datepickerf"></td>
		<td><?php echo $str['format_date']; ?></td>
	</tr>
</table>
 
<script src="datepicker_<?php echo $lang;?>.js"></script>)

datepicker_fr.js :

Code js :

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

Code js :

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
$(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"
	};
 
	$('.datepicker').datepicker({
		language: 'en',
		autoclose: true,
		todayHighlight: true
	});
});

Invité · 04/05/2019, 22h41

bootstrap-datepicker doit être appelé après bootstrap.

Ça parait pourtant logique, non ?

Tu ne mets pas ton slip après ton pantalon ? *
Tu ne mets pas tes chaussettes après tes chaussures ?

* Tu n'es pas Superman.

**laurentSc** · 05/05/2019, 11h00

Envoyé par jreaux62

Tu ne mets pas ton slip après ton pantalon ?

ca risque pas ; j'en mets pas (même pas vrai

)

Logique, oui, sauf que mon neurone devait être fatigué.

Ce matin, j'ai fait l'échange, mais pas mieux...https://codepen.io/laurentsc/pen/XwWKgZ

Invité · 05/05/2019, 11h52

1- Fais des copier-coller de MES codes....

2- As-tu vraiment besoin de jquery-ui ?
A priori, non (puisque tu utilises le datepicker de Bootstrap).
Donc, enlève le script.

Invité · 05/05/2019, 12h07

Pour en revenir à la problématique initiale :

Envoyé par laurentSc

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

Voici le script qui permet d'affecter la même valeur à la 2ème date : https://codepen.io/jreaux62/pen/WBNGJy

Code jQuery :

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

1
2
3
4
5
6
7
8
$(function(){	// QUAND LE DOM EST PRET
  $('#datepickerd').datepicker({
  }).on('changeDate', function (selected) {
    var startDate = new Date(selected.date.valueOf());
    $('#datepickerf').datepicker('setDate', startDate);     // applique la même date
    $('#datepickerf').datepicker('setStartDate', startDate); // applique la même date de DEPART
  });
});

A LIRE :

https://bootstrap-datepicker.readthe...st/events.html
+ script trouvé sur le web : https://stackoverflow.com/questions/...nswer-30456709

**laurentSc** · 05/05/2019, 14h46

Merci pour le script. A noter que tu as un problème en commun avec moi (si on clique 2 fois sur le champ date) (même si on enlève jquery-ui.js du script !).

Je pars dans 5 minutes pour plusieurs jours...[edit] retour mardi soir

**laurentSc** · 07/05/2019, 17h25

Hello,

retour plus tôt que prévu. J'ai donc tout de suite essayé ton script. Petit problème : si je copie ce script dans un fichier html en le modifiant un peu (pour avoir un des 2 calendriers en anglais), il ne marche plus : pas moyen de changer les mois du calendrier français (par incrémentation ou décrémentation) et le calendrier anglais est en...français !

J'ai même fait un codepen : https://codepen.io/laurentsc/pen/gJpgdJ

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
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>  
 
<table>
	<tr>
		<td>Date_de_début : </td>
		<td><input type="text" class="form-control datepicker" placeholder="selectionnez_une_date" id="datepickerd" name="datepickerd"></td>
 
		<td>Date_of_end: </td>
		<td><input type="text" class="form-control datepicker" placeholder="choose_a_date" id="datepickerf" name="datepickerf"></td>
	</tr>
</table>

Code js :

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
 
$(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
	});
});
// on affecte la date de début à la date de fin
$(function(){	// QUAND LE DOM EST PRET
  $('#datepickerd').datepicker({
  }).on('changeDate', function (selected) {
    var startDate = new Date(selected.date.valueOf());
    $('#datepickerf').datepicker('setDate', startDate);     // applique la même date
    $('#datepickerf').datepicker('setStartDate', startDate); // applique la même date de DEPART
  });
});
 
$(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
	});
});

Code css :

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

1
2
https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css

Invité · 07/05/2019, 17h36

Envoyé par laurentSc

...pour avoir un des 2 calendriers en anglais...

Ben voyons...

Pourquoi faire simple........... ?

https://bootstrap-datepicker.readthe...test/i18n.html

**laurentSc** · 07/05/2019, 17h43

Tel quel, c'est sûr que ca a aucun sens mais je prépare le terrain pour faire un script bilingue (et pour mon essai, j'ai cherché à modifier le moins possible ton script, mais il est donc important de le faire marcher !)

[datepicker] Initialiser le 2e champ date en fonction du 1er

jQuery

Discussions similaires

Partager

Partager