Discussion :

[pouic06]

Bonjour les amis,

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



Le code ressemble à cela :

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

[Showie]

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/

[pouic06]

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

[Showie]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Watilin]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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