Utilisation matchMedia pour Datepicker
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:
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.
