datepicker en français avec dates de début et de fin

**laurentSc** · 01/01/2018, 00h25

Bonsoir et bonne année

J'ai codé un formulaire qui devrait permettre de saisir une date de début et une date de fin au format français, le souci étant que le calendrier de datepicker ne s'affiche pas (c'était au point pour ne saisir qu'une seule date)

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
 
<head>
 <meta charset="utf-8">
 
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 
  <link rel="stylesheet" href="/resources/demos/style.css">
 
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
  <script src="i18n/datepicker-ar.js"></script>
 
  <script src="i18n/datepicker-fr.js"></script>
 
  <script src="i18n/datepicker-he.js"></script>
 
  <script src="i18n/datepicker-zh-TW.js"></script>
 
  <script>
 
$(function() {
$( "#datepickerdeb" ).datepicker({
altField: "#datepickerdeb",
closeText: 'Fermer',
prevText: 'Précédent',
nextText: 'Suivant',
currentText: 'Aujourd\'hui',
monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
weekHeader: 'Sem.',
dateFormat: 'dd/mm/yy',
if( $("#datepickerfin").val() == '' )
{
        $('#datepickerfin').val( $(this).val() );
}
});
 
$( "#datepickerfin" ).datepicker({
altField: "#datepickerfin",
closeText: 'Fermer',
prevText: 'Précédent',
nextText: 'Suivant',
currentText: 'Aujourd\'hui',
monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
weekHeader: 'Sem.',
dateFormat: 'dd/mm/yy'
});  
});  
  </script>
 
 
 
 
<title>Ajout d'un évènement</title>
</head>
<body>
	<form id="form-add-event" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
		<p>Date de début : <input type="text" id="datepickerdeb" name="datepickerdeb" value="<?php echo $result['datepickerdeb_form'];?>"/></p>
		<p>Date de fin : <input type="text" id="datepickerfin" name="datepickerfin" value="<?php echo $result['datepickerfin_form'];?>"/></p>
:form>	<p>
</body>
<

**laurentSc** · 01/01/2018, 15h03

Submergé par les réponses, je suis reparti de cette vieille discussion : https://www.developpez.net/forums/d1...cker-initiale/ et voilà :

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
$(function() {
$('#datepickerdeb').datepicker({ 
		dateFormat: 'yy-mm-dd', firstDay:1, minDate: new Date(),
		closeText: 'Fermer',
		prevText: 'Précédent',
		nextText: 'Suivant',
		currentText: 'Aujourd\'hui',
		monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
		monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
		dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
		dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
		dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
		weekHeader: 'Sem.',
 
		onSelect: function() {
			if( $("#datepickerfin").val() == '' )
			{
				$('#datepickerfin').val( $(this).val() );
			}
		}
	});
	$('#datepickerfin').datepicker({ 
		dateFormat: 'yy-mm-dd', firstDay:1, minDate: new Date(),
		closeText: 'Fermer',
		prevText: 'Précédent',
		nextText: 'Suivant',
		currentText: 'Aujourd\'hui',
		monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
		monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
		dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
		dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
		dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
		weekHeader: 'Sem.',		
	});
 
});

(petite modif pour que ce soit en fr)

**laurentSc** · 04/01/2018, 11h53

L'autre jour, je croyais avoir la solution, mais non...

Après une petite recherche, je suis arrivé au code suivant :

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
87
88
89
90
91
92
93
 <head><meta name="viewport" content="width=device-width, initial-scale=1">
 
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 
  <link rel="stylesheet" href="/resources/demos/style.css">
 
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
  <script src="i18n/datepicker-ar.js"></script>
 
  <script src="i18n/datepicker-fr.js"></script>
 
  <script src="i18n/datepicker-he.js"></script>
 
  <script src="i18n/datepicker-zh-TW.js"></script>
 
  <script>
jQuery(function($){
        $.datepicker.regional['fr'] = {
                closeText: 'Fermer',
                prevText: '&#x3c;Préc',
                nextText: 'Suiv&#x3e;',
                currentText: 'Aujourd\'hui',
                monthNames: ['Janvier','Fevrier','Mars','Avril','Mai','Juin',
                'Juillet','Aout','Septembre','Octobre','Novembre','Decembre'],
                monthNamesShort: ['Jan','Fev','Mar','Avr','Mai','Jun',
                'Jul','Aou','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'],
                weekHeader: 'Sm',
                dateFormat: 'dd-mm-yy',
                firstDay: 1,
                isRTL: false,
                showMonthAfterYear: false,
                yearSuffix: '',
                minDate: 0,
                maxDate: '+12M +0D',
                numberOfMonths: 2,
                showButtonPanel: true
                };
        $.datepicker.setDefaults($.datepicker.regional['fr']);
});
  
  
$(function() {
$('#datepickerdeb').datepicker({ 
                dateFormat: 'yy-mm-dd', firstDay:1, minDate: new Date(),
                closeText: 'Fermer',
                prevText: 'Précédent',
                nextText: 'Suivant',
                currentText: 'Aujourd\'hui',
                monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
                monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
                dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
                dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
                dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
                weekHeader: 'Sem.',
 
                onSelect: function() {
                        if( $("#datepickerfin").val() == '' )
                        {
                                $('#datepickerfin').val( $(this).val() );
                        }
                }
        });
        $('#datepickerfin').datepicker({ 
                dateFormat: 'yy-mm-dd', firstDay:1, minDate: new Date(),
                closeText: 'Fermer',
                prevText: 'Précédent',
                nextText: 'Suivant',
                currentText: 'Aujourd\'hui',
                monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
                monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
                dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
                dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
                dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
                weekHeader: 'Sem.',             
        });
  
});  
  </script>
</head>
<body>
<form id="form-add-event" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
		<p>Date de début : <input type="text" id="datepickerdeb" name="datepickerdeb" value="<?php if (isset($result['datepickerdeb_form'])) echo $result['datepickerdeb_form'];?>"/></p>
		<p>Date de fin : <input type="text" id="datepickerfin" name="datepickerfin" value="<?php echo $result['datepickerfin_form'];?>"/></p>
	        <p><input type="submit" name="submitModif" value="Ajouter l'événement"/></p>
	        <p><INPUT TYPE='button' value='Annuler' onclick="location.href='http://localhost/cal/index.php'"</p>
	</form>
</body>

mais si je clique sur "ajouter l'événement", "fichier non trouvé". Peut-on m'aider ?

datepicker en français avec dates de début et de fin

jQuery

Discussions similaires

Partager

Partager