Declaration fction JS dans index et appel dans un autre ficher

Fermé
HellBenito Messages postés 56 Date d'inscription vendredi 28 mars 2014 Statut Membre Dernière intervention 20 mars 2015 - 10 oct. 2014 à 12:16
HellBenito Messages postés 56 Date d'inscription vendredi 28 mars 2014 Statut Membre Dernière intervention 20 mars 2015 - 10 oct. 2014 à 13:40
Bonjour,

Je suis plutôt léger en JS et j'aimerai utiliser la fonction detapicker :

https://jqueryui.com/datepicker/

Lorsque je met tout le code dans mon index ca fonctionne, mais plutot qu'au dessus de mon menu (o.O) j'aimerai mettre ce calendrier dans un formulaire, dans une autre page.

Je ne sais pas comment m'y prendre, je laisse le script et les meta dans index et le imput la ou je veux faire apparaitre datepicker?

il y a donc ce code à l'origine:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

J'ai mis ca dans index.html :

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>


j'ai essayé de l'incorporer de cette manière (réalisé avec bootstrap, d'où les "col-lg") dans un form.html:

<div style="width:190px;" class="espace form-group" >
<label for="select" class="col-lg-2 control-label">Période désirée</label>
<div class="col-lg-10">
<p>
<input class="form-control" type="text" id="datepicker">
</p>
</div>
</div>

Je ne sais pas comment appeler la fonction JS correctement, je n'ai encore jamais fais ca. J'ai tenté un appel de class ou un href mais non...

Merci de m'expliquer la marche a suivre , si vous le voulez bien ^^. Je pense que c'est assez simple en espérant que bootstrap ne soit pas un frein.


A voir également:

2 réponses

Ysabe_l Messages postés 12461 Date d'inscription vendredi 12 avril 2013 Statut Contributeur Dernière intervention 28 avril 2024 274
10 oct. 2014 à 13:04
Bonjour,

Il faut faire l'appel à un pluggin dans la page où il est utilisé, pas sur une autre.

Donc ça tu le mets dans la page où tu as le formulaire.

....
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> 
 
</head>

<body>
........
<script>
$(function() { 
$( "#datepicker" ).datepicker(); 
}); 
</script> 
</body>
0
HellBenito Messages postés 56 Date d'inscription vendredi 28 mars 2014 Statut Membre Dernière intervention 20 mars 2015
10 oct. 2014 à 13:40
Merci, pour la réponse, oui en fait je le faisais quand j'ai lu ton message, mais ca ne marche pas...
0