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

Version imprimable

Voir 40 message(s) de cette discussion en une page

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:

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>

Bonjour Laurent,

tu vas SIMPLIFIER tout ça.

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

Code:

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:

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:

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

4- Enfin, tu vas PROPREMENT INDENTER TON CODE :

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

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

Je ne vais pas te le dire à chaque fois.

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:

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:

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>

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

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:

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>

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:

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

language.en.inc.php

Code:

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

datepicker_fr

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
 
	$(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:

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:

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

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:

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

03/05/2019, 19h38
Invité
Code:

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:

1 2 3 <?php $dico['placeholder_choose_date'] = 'sélectionnez une date'; ?>
2- site-langue-en.php :
Code:

1 2 3 <?php $dico['placeholder_choose_date'] = 'choose a date'; ?>
3- Et il suffit d'appeler le "bon" fichier langue.

Code:

<?php require('.................../site-langue-'.$lang.'.php'; ?>
03/05/2019, 19h49
Invité

Citation:

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

Citation:

Envoyé par jreaux62

* Et nous, des cheveux...

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

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:

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:

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() );
			}
		})

04/05/2019, 11h21
Invité

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

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.
04/05/2019, 17h45
laurentSc

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 ?
04/05/2019, 18h47
Invité
- As-tu relu ce que j'ai écrit ?
- As-tu repris mes codes ?
- As-tu corrigé les tiens ?
Non.

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:

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:

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:

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
	});
});

04/05/2019, 21h41
Invité

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.
05/05/2019, 10h00
laurentSc

Citation:

Envoyé par jreaux62

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

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

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
05/05/2019, 10h52
Invité

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.

Pour en revenir à la problématique initiale :

Citation:

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:

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

05/05/2019, 13h46
laurentSc

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

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:

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:

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:

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

07/05/2019, 16h36
Invité
Citation:

Envoyé par laurentSc

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

Ben voyons... :roll: Pourquoi faire simple........... ?
- https://bootstrap-datepicker.readthe...test/i18n.html
07/05/2019, 16h43
laurentSc

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

Voir 40 message(s) de cette discussion en une page