View  Edit  Attributes  History  Attach  Print  Search

ACCUEIL | ARDUINO > S'INSTALLER > DEBUTER > APPROFONDIR | PROCESSING | MECATRONIQUE | MATERIEL | OUTILS | TESTS | Plus...|
Python > Shell > ATELIERS Python + Qt > PyQt apps > PyQt+Arduino | Mes Robots | RepRap | Mes lib'Arduino | Mes shields Arduino | Mes distros | Les Mini-PC |
ATELIERS ARDUINO| VIDEOS | COMPRENDRE | REFERENCES | CODER | TECHNIQUE | GNU/LINUX | LIENS | Rien à voir |

Webapps d'initiation : jQueryUI : Afficher la date sélectionnée à l'aide d'un Datepicker

Mini-webapps avec Pyduino
Par X. HINAULT - Créé le 05/09/2014

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

<div id="div"></div>

4.  Head : Inclusion des librairies utilisées

<script src="static/jquery.min.js" type="text/javascript"></script>
<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

$(document).ready(function(){

        $( "#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.