[Datepicker] Faire débuter l'affichage en janvier

**legrandse** · 14/11/2018, 09h42

Bonjour à tous,

J'aurais bien voulu une aide afin d'afficher un datepicker (JqueryUI) commençant par le mois de janvier de l'année.
Nativement, le datepicker débute avec le mois en cours.

J'ai regardé dans la doc avec minDate mais cela ne fonctionne pas.

Pouvez-vous m'aider svp

Voici mon code:

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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="css/styles.css">
   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <script src="js/script.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
  <script>
 
  //var activeDays = ["7-6-2018", "7-7-2018", "7-8-2018", "7-12-2018", "7-13-2018", "7-14-2018"]; 
  //var arrival = <?php echo json_encode($arrayArrival); ?>;
var arrival = ["7-6-2018", "7-12-2018"];
  //var departure = <?php echo json_encode($arrayDeparture); ?>;
var departure = ["2018-10-18", "2018-10-11"];
 
 //calcule le nombre de jour dans le mois
  function getNumberOfDays(year, month) {
    var days = 31;
    var currentDate = new Date(year, month, days);
    var itsOk = false;
 
    do {
        if (currentDate.getDate() < 28) {
            // La date est passée au mois suivant
            days--;
            currentDate = new Date(year, month, days);
        } else {
            itsOk = true;
        }
    }  while (!itsOk);
    return currentDate.getDate();
}
  
  
  
    $( function() {
          var date = new Date();
          var m = date.getMonth();
          var d = '01';
          var e = getNumberOfDays(date.getFullYear(), (m+2));
          var y = date.getFullYear();
          var startdate = y + '/' + (m+1) + '/' + d ;
          
          var enddate = y + '/' + (m+3) + '/' + e ;     
        $( "#datepicker" ).datepicker({
        firstDay: 1,    
        dayNamesMin: [ "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa" ],
        monthNames: [ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Decembre" ],
        monthNamesShort: [ "Jan", "Fév", "Mar", "Avr", "Mai", "Juin", "Juil", "Aout", "Sep", "Oct", "Nov", "Déc" ],
        dateFormat : "dd/mm/yy",
        changeMonth: false,
        minDate: new Date(startdate),
        // maxDate: new Date(enddate),
        numberOfMonths: 3,
      
          beforeShowDay: function(date) {
         var events = [true,''];
         var m = date.getMonth();
         var d = date.getDate();
         var y = date.getFullYear();
         var currentdate = y + '-' + (m+1) + '-' + d ;
         var n = [];
         
        departure.forEach(function(item){
                    n.push((new Date(item)).getDay());
                });
        
                        //var sun = getDay(currentdate);                
                        
                        if ( activeDays.indexOf(currentdate)  > -1)  
            {
                events = [true,'isActived'];
                        }
            
                        if ( arrival.indexOf(currentdate)  > -1) 
                        {
                events = [true,'isActivedarrival'];
                        }
                        if ( departure.indexOf(currentdate)  > -1) 
                        {
                events = [true,'isActiveddeparture'];
                        }
            if (departure.indexOf(currentdate)  > -1 && n.indexOf(0) > -1)
                        {
                                events = [true, 'isActiveddepartureSun'];
                        }
                        
                        if ( arrival.indexOf(currentdate) > -1 && departure.indexOf(currentdate) >-1) 
                        {
                events = [true,'isActivedEqual'];
                        }
                        
                        
                        
            return events;
        }
          
          
    });
  } );
  
  
  </script>
</head>
<body>
 
  <h2>Planning </h2>
 
 
          <div id="datepicker"></div>
 
 
</body>
</html>