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
Articles Liés
- Afficher du texte dans la fenêtre Terminal du PC
Le Terminal est un outil puissant et pratique qui permet aux utilisateurs de contrôler leur…
- Afficher des nombres dans la fenêtre Terminal du PC
Les ordinateurs sont devenus une partie intégrante de notre vie quotidienne et leur utilisation est…
- SD Card : Afficher le contenu de la carte mémoire micro SD
Les cartes mémoire micro SD sont des supports de stockage très pratiques et très populaires.…