Discussion :

[Danamel78]

Bonjour à tous,

Dans un formulaire j'utilise un script Datepicker pour sélectionner les dates.

Je suis en train de modifier mon site pour l'affichage sur mobiles et je voudrais utiliser un script datepicker différent sur grand ou petit écran.
J'essaie de m'inspirer d'un article.
J'ai beaucoup d'essai mais mes connaissances en javascript ne me permettent pas d'arriver à ce que je voudrais.
A l'ouverture de la page il faudrait charger un des 2 scripts Datepicker suivant la taille de l'écran et changer si il y a redimensionnement de l'écran. Actuellement le fichier datepickerSmall.js se charge quelque soit la taille de l'écran et ne change pas si on redimensionne.

voici mon code actuel:

Code :

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
<script>
// Fonction exécutée au redimensionnement
function redimensionnement() {
	var result = document.getElementById('result');
	if("matchMedia" in window) { // Détection
	if(window.matchMedia("screen and (min-width:1024)").matches) {
	// Chargement du script datepickerBig dans un nouvel élément script ajouté dans la section	
		var script1 = document.createElement('script');
		script1.type='text/javascript' ;
		script1.src = 'js/datepickerBig.js';
		// Insertion dans le DOM
		document.getElementsByTagName('section')[0].appendChild(script1);
	} else {
	// Sinon chargement du script datepickerSmall
		var script2 = document.createElement('script');
		script2.type='text/javascript';
		script2.src = 'js/datepickerSmall.js';
		// Insertion dans le DOM
		document.getElementsByTagName('section')[0].appendChild(script2);	
	}
  }
}
if (window.addEventListener) {
  window.addEventListener('load',redimensionnement , false);
}
else if (window.attachEvent) {
  window.attachEvent('onload', redimensionnement );
}
</script>

Merci d'avance à toute aide me permettant d'avancer.

[SylvainPV]

Le meilleur datepicker pour petits et grands écrans est le datepicker natif: <input type='date'>




Sinon il manque l'unité "px" derrière le chiffre 1024 dans ta media query. Ton problème vient peut-être de là

[Danamel78]

Merci pour la réponse. Effectivement mes nombreux essais infructueux ont fait disparaître par erreur ce px.
Avec maintenant à l'ouverture de la page le bon script est integré en fonction de la taille de la fenêtre. Mais le dimensionnement en live ne fonctionne toujours pas.

[SylvainPV]

Il ne suffit pas d'insérer à nouveau les scripts pour basculer d'un datepicker à un autre. Ces scripts doivent instancier des choses, modifier les éléments... Il faudrait trouver un moyen de réinitialiser le DOM d'origine, de nettoyer tout ce qu'ont pu faire ces datepicker custom. Regarde s'ils proposent une méthode pour cela.