Customiser un Datepicker

Bonjour les amis,

Je souhaiterais faire un datepicker un peu stylisé. Je m'inspire d'un autre site, il ressemble à ça :

Pièce jointe 430562

Le code ressemble à cela :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<div class="day_group_wrapper clearfix"> <div class="day_group day_group_arrive"> <label>Arrival</label> <div class="date_box" id="arrival"> <div class="booking_arrow_icons"></div> <div class="ArriveMonth">November</div> <input class="day hasDatepicker" onfocus="this.blur()" readonly="" id="dp1543343621621"> <div class="day_formatted" aria-disabled="true">28</div> <i class="flaticon-arrow-down"></i> </div> </div> <div class="day_group day_group_depart"> <label>Departure</label> <div class="date_box"> <div class="booking_arrow_icons"></div> <div class="DepartMonth">November</div> <input class="departday hasDatepicker" onfocus="this.blur()" readonly="" id="dp1543343621622"> <div class="departday_formatted" aria-disabled="true">30</div> <i class="flaticon-arrow-down"></i> </div> </div> </div>

---

Grosso modo en cliquant n'importe où sur le petit panneau blanc où se trouve la date, s'ouvre le datepicker, lorsque l'on choisit la date, le petit panneau se met à jour.

J'ai pu copier le HTML et le CSS mais je sais pas du tout par où commencer avec le JS, d'où ce post.

Merci d'avance

Bonjour,

Est ce un besoin de le développer toi même ? Car sinon il existe plein de datepicker déjà tout fait ou il ne reste plus qu'a personnalisé le visuel selon tes goûts.

Par exemple celui de bootstrap https://bootstrap-datepicker.readthedocs.io/en/latest/

Merci, c'est parfait, j'ai mis Bootstrap Datepicker et ça marche. Maintenant je me demande comment je peux faire pour mettre à jour les rectangles blancs avec le nom du mois et le jour choisi dans le datepicker.

Merci d'avance :mrgreen:

Tu peux ajouter un evenement onchange sur l'input de ton date picker et initialiser le text de ta div.

En gros (très gros) un truc comme ça :

Code:

---

1 2 3 4 5 6 7

//Il faut rajouter un ID sur les DIV et l INPUT document.getElementById("day hasDatepicker").onchange = function(e){   document.getElementById("departMonth").innerHTML = this.getMonth(); document.getElementById("day_formatted").innerHTML = this.getDate(); };

---

En l’occurence on peut utiliser textContent à la place de innerHTML, ce sera plus efficace.

Code:

---

1 2 3 4 5 6

//Il faut rajouter un ID sur les DIV et l INPUT document.getElementById("day hasDatepicker").onchange = function(e) { document.getElementById("departMonth").textContent = this.getMonth(); document.getElementById("day_formatted").textContent = this.getDate(); };

---