Time Picker

Présentation

Ce plugin est un ajout à la librairie datepicker de spip.
Il est basé sur la librairie http://trentrichardson.com/examples...

Il permet de gérer les dates et/ou les heures sous forme graphique.
Il y ajoute 2 petits boutons “+” et “-” pour incrémenter ou décrémenter la valeur

Ce plugin active les librairies jQuery ui de spip :

  • Datepicker
  • Slider
  • Button

Fonctionnement

Il faut rajouter une class dans le champs input
1- Si l’on veut un champs avec la date et les heures
<input class="datetimepicker" name="dateheure"  />

2- Si l’on veut un champs avec seulement les heures
<input class="timepicker" name="heure"  />

Il existe une multitude de réglages possibles. toutes les options sont sur le site de l’auteur :

updated on 2 October 2019

Discussion

2 discussions

  • 5
    Keny972

    Bonjour,

    ce plugin est-il compatible avec spip 3.1? parce qu’a priori cela ne fonctionne pas.

    Cdt

    • Il me semble que Oui, mais il faut que je vérifie

      Quelle est ton erreur ?

    • Keny972

      le plugin est activé - dans mon formulaire pour l’input concerné j’ai mis la classe datetimepicker (ou timepicker pour un autre). Par contre lorsque je clique sur le champ, il agit comme n’importe quel input text

      je ne suis pas sûre de l’erreur commise, et comme il s’agit de site intranet, je ne peux pas partager l’url.

    • As tu une erreur dans firebug ?
      (si tu cliques sur F12 sous firefox, puis onglet : console)

    • Keny972

      non aucune erreur.

    • Cela veut certainement dire que le script js du plugin n’est pas chargé.

      Je viens de tester chez moi, ca fonctionne,
      avec dans ma page :

      1. <input class="datetimepicker" name="dateheure"  />

    Reply to this message

  • 1

    Bonjour,
    juste pour signaler qu’apparemment ce plugin insère du code CSS dans la balise body, ce qui génère des erreurs au validateur W3C. N’y aurait-il pas moyen de passer par #INSERT_HEAD ?

    Le message d’erreur :

    document type does not allow element “style” here
    <style type="text/css">
    The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements — such as a “style” element in the “body” section instead of inside “head” — or two elements that overlap (which is not allowed).

    Le code incriminé :

    <style type="text/css">
    div.time-picker{position:absolute;height:200px;width:4em;overflow:auto;background:#fff;border:1px solid #000;z-index:99998}
    div.time-picker-12hours{width:6em}
    div.time-picker ul{list-style-type:none;margin:0;padding:0}
    div.time-picker li{padding:1px;cursor:pointer}
    div.time-picker li.selected{background:#316AC5;color:#fff}
    img.ui-datepicker-trigger { display: inline-block; padding: 0; margin: 0px 0 0 -19px; vertical-align: middle; }
    div.time-picker {font-size:11px;  width:5em; /* needed for IE */}
    .formulaire_spip input.date {width:9em;padding-right:25px;}
    .formulaire_spip input.heure {width:7em;}
    </style>

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom