Exclure des jours et des dates du calendrier datepicker

Version imprimable

Bonjour le forum !!
après plusieurs semaines de tests et de recherches sur le web, je n'arrive pas à
exclure des dates et des jours de mon calendrier avec datepicker.

Voilà le script qui marche et qui exclut bien les jours du lundi au jeudi

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
 
<script>
$(function() {
    $( "#datepicker" ).datepicker({
	monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
			   monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jun','Jul','Aoû','Sep','Oct','Nov','Déc'],
               dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
               dayNamesMin: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
               dayNamesShort: ['Di','Lu','Ma','Me','Je','Ve','Sa'],
	            	 maxDate: "+2m", 
				  minDate: "0m", 
				firstDay:1,	
	dateFormat: 'yy-mm-dd',	
      altField: "#alternate",
      altFormat: "DD",
	   beforeShowDay : function (date) {
                  var dayOfWeek = date.getDay ();
                  if (dayOfWeek == 1 ||dayOfWeek == 2 || dayOfWeek == 3 || dayOfWeek == 4) return [false];
                  else return [true];
 
               }
    });
  });
  </script>

Maintenant je voudrais exclure les date des jours non ouverts comme par exemple les jours fériés ,paques ...

et faire la fusion des deux codes

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
natDays = [
        [5, 1], [5, 08], [5, 13], [5, 23], 
    ];
 
    function nationalDays(date) {
        for (i = 0; i < natDays.length; i++) {
            if (date.getMonth() == natDays[i][0] - 1
            && date.getDate() == natDays[i][1]) {
                return [false, natDays[i][2] + '_day'];
            }
        }
        return [true, ''];
    }

Merci d'avance pour votre aide.

05/04/2021, 20h12
mathieu

si la fonction "nationalDays" fonctionne bien, faites juste else return nationalDays(date);
05/04/2021, 22h23
ctsblv

Bonsoir Mathieu
Merci pour votre réponse rapide.
Le code nationalDays a été récupéré sur un forum.
Comme je suis une nullité , je ne vois pas où placer le
else return de votre réponse.
Comment fusionner les 2 codes?
Merci pour votre aide.
06/04/2021, 10h09
ctsblv

Bonjour
le sujet est résolu.
Merci

Bonjour
toutes mes excuses, j'ai mis le sujet résolu, mais je n'ai pas donné la solution.

formulaire

Code:

1
2
<p>	Datec : <input type="text" id="datepicker" name="datec" size="8" required value="<?php if(isset($_POST['datec'])){echo $_POST['datec'];} ?>" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Jour Semaine: <input type="text" id="alternate" size="8"></p>

HTML et CSS

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
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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-fr.js"></script>    
<script type="text/javascript" src="ui.datepicker.js"></script>
<script type="text/javascript" src="ui.datepicker-fr.js"></script>
<style>
.ui-datepicker-unselectable.ui-state-disabled span.ui-state-default
{
    background-color: Red;
    background-image: none;
    color: White;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    color: black;
    background: lightgreen;
        text-align: center;
        font-weight: Bold;
}
.ui-datepicker { 
font-size : 1.1em ! important;
font-weight: bold;
 }
</style>

DATEPICKER

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
 
<script>
 //Disable Arrays
    var disableDays = [2,3,4], //ma, me, je
        disableDates = ["01-01-2022", "04-04-2021", "05-04-2021", "01-05-2021","08-05-2021", "13-05-2021", "23-05-2021", "24-05-2021", "14-07-2021", "15-08-2021", "01-11-2021", "11-11-2021", "25-12-2021",] //dd-mm-yy
//                                                      PAQUES    Lundi PAQUES   Fete Travail      armistice           ascension                pentecote         lundi pent                                                                    armistice       
     Noel
 $(function() {   //Create DatePicker
    $("#datepicker").datepicker({
        
        monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
                           monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jun','Jul','Aoû','Sep','Oct','Nov','Déc'],
               dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
               dayNamesMin: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
               dayNamesShort: ['Di','Lu','Ma','Me','Je','Ve','Sa'],
                         maxDate: "+2m", 
                                  minDate: "0m", 
                                firstDay:1,     
        dateFormat: 'yy-mm-dd', 
      altField: "#alternate",
      altFormat: "DD",
        beforeShowDay: function(date){
 
            var day = date.getDay(),
                dmy = $.datepicker.formatDate('dd-mm-yy', date);
 
            //Disable day
            if (disableDays.indexOf(day) != -1){
                return [false]; 
 
            //Disable date
            } else if (disableDates.indexOf(dmy) != -1){
                return [false];
 
            //Enable date
            } else {
                return [true];
            }
        }
    })
})
  </script>

J'espère que cela aidera.