Les webapps sont devenues une partie intégrante de notre vie quotidienne et leur utilisation s’est considérablement développée ces dernières années. Parmi les outils les plus populaires, on trouve jQueryUI, qui offre aux développeurs une variété de composants et d’interfaces utilisateur pour créer des applications web. Dans cet article, nous allons examiner comment utiliser jQueryUI pour afficher la date sélectionnée à l’aide d’un Datepicker. Nous verrons comment configurer le Datepicker et comment l’utiliser pour afficher la date sélectionnée.
Webapps d’initiation : jQueryUI : Afficher la date sélectionnée à l’aide d’un Datepicker
1. Présentation
Dans cette webapp d’initiation utilisant jQuery UI, voyons comment obtenir la date sélectionnée à l’aide d’un Datepicker.
2. Structure type de la webapp
Comme cela est présenté dans les tutos dédiés, je rappelle que la structure type de la webapp est la suivante :
- un seul répertoire incluant :
- librairies utilisées
- la page html de la webapp
- le code serveur Pyduino opérationnel
- la page HTML de la webapp incluant :
- la définition des éléments graphique au niveau du body
- l’inclusion des librairies utilisées
- le code Javascript actif de la page
3. Body HTML : définition des éléments graphiques de la page
4. Head : Inclusion des librairies utilisées
<script src=« static/jquery-ui/jquery-ui.js » type=« text/javascript »></script>
<link href=« static/jquery-ui/jquery-ui.css » rel=« stylesheet » type=« text/css »>
5. Head : Code Javascript de la page
$( « #div » ).css({« font-size »:« 60% »}).datepicker({
inline: true,
onSelect:function(dateText, inst) {
//alert (‘Date choisie= »+dateText);
dateList=dateText.split(« /’);
alert (‘Date choisie= »+dateList[1]+« : »+dateList[0]+« : »+dateList[2]);
} // fin onSelect
}); // fin datepicker
}); // fin function + fin ready + fin $
6. La webapp complète :
L »archive complète de la webapp est disponible ici, incluant :
- La page HTML complète
- Le serveur Pyduino opérationnel
- Les librairies utilisées
Remarque : le serveur pyduino suppose que la librairie Pyduino et ses dépendances soient installées.
Articles similaires:
- Webapps d’initiation : Ajax :
- Webapps d’initiation : w2UI : Afficher dans un w2sidebar la liste des fichiers d’un répertoire et le nom du fichier sélectionné dans une zone texte
- Webapps d’initiation : w2UI : Afficher dans un w2grid une série de données horodatées
- Webapps d’initiation : w2UI : Afficher dans un w2grid une série de données horodatées à partir d’un fichier de données
- Webapps d’initiation : w2UI : Afficher dans un w2grid de test
