Plugin Date Picker


#1

Suite du sujet Plugin vis.js Timeline:

Merci @kixam pour cette confirmation :smile:

Pour l’URL de la démo, je suppose que c’est celle-ci : http://kixam.github.io/TW5-datePicker/

Ma première question, comment faire pour l’intégrer à l’utilisation de vis.js Timeline ? Tu aurais un exemple à me donner ?
Pour l’instant, j’utilise une date de début et une date de fin avec deux champs personnalisés (début et fin). Je comprends que par défaut datePicker modifie la date de création du tiddler, mais donc :

  1. Je ne vois pas trop comment intégrer le plugin uniquement sur les tiddlers que je souhaite gérer en timeline ?
  2. Est-il possible d’associer le plugin à un champ personnalisé ? Réponse Oui : <$edit-date field="debut" />

Peut-être me faut-il modifier mon template pour l’intégrer directement en mode lecture (comme ça pas besoin de passer en mode édition) ?

Merci de ton retour,


[Prêt à l'emploi] Une todo liste et option timeline
#2

J’ai testé avec le paramètre field, je peux bien en modifier un (ici début) :

<$edit-date field=“debut” format=“DD/MM/YYYY”>

Mais du coup ça ne semble pas possible d’en modifier deux ?

Sinon je prend le paramètre date que j’utilise avec Timeline, TW semble jouer au nombre aléatoire, et les chiffres s’amusent à changer de place (animation non visible avec la capture).


#3

bonjour @sylvain,

  • si tu regardes le tiddler “Usage” sur la page de démo, tu verras que le widget accepte des options. Notamment, tu peux choisir un champ à éditer (au lieu de created par défaut).
  • actuellement, le plugin ne s’intègre pas avec l’éditeur de tiddlers (voir raison technique). Le widget s’utilise un peu comme <$edit-text> (voir documentation), donc dans le corps de texte.
  • l’utilisation de template peut te permettre en effet d’utiliser le widget dans les corps de texte des tiddlers visibles dans la timeline si son filtre correspond.
  • une limitation existe pour l’instant: le format de sauvegarde dans le champ cible est forcément le format de date de TiddlyWiki, soit “YYYYMMDDHHmmssSSS” (compatible avec les champs created et modified). D’après ton dernier post, je vois qu’il faut que je laisse à l’utilisateur la possiblité de mettre un format de son choix… je vais m’en occuper ce week-end
  • pour modifier 2 champs, il faut utiliser le widget 2 fois :wink: ce widget ne permet pas de choisir des plages de date, ni de choisir des heures

Un petit cadeau en bonus, voici une macro que j’utilise pour afficher ou éditer un champ de type “texte” sans avoir à passer en mode édition:

\define showEdit(field,edittag:“input”,viewmacro:“view”,viewtag:“span”)
<$reveal state="$:/temp/edit-field-$(currentTiddler)$-$field$" type=nomatch text=“yes”>
<$list filter="[title[$(currentTiddler)$]get[$field$]]">
<$macrocall $name="$viewmacro$" to={{!!title}} string={{!!title}} abbr={{!!title}} mail={{!!title}} name={{!!title}} tag="$viewtag$" />
</$list>
<$button set="$:/temp/edit-field-$(currentTiddler)$-$field$" setTo=“yes” class=“tc-btn-invisible”>{{$:/core/images/edit-button}}</$button>
</$reveal>
<$reveal state="$:/temp/edit-field-$(currentTiddler)$-$field$" type=match text=“yes”>
<$edit-text field="$field$" tiddler="$(currentTiddler)$" tag="$edittag$" />
<$button set="$:/temp/edit-field-$(currentTiddler)$-$field$" setTo=“no” class=“tc-btn-invisible”>{{$:/core/images/done-button}}</$button>
</$reveal>
\end

Adapté à un champ date et en utilisant le plugin datePicker ça pourrait donner (je te laisse tester les modifs):

\define showEditDate(field,viewmacro:“view”,viewtag:“span”)
<$reveal state="$:/temp/edit-field-$(currentTiddler)$-$field$" type=nomatch text=“yes”>
<$list filter="[title[$(currentTiddler)$]get[$field$]]">
<$macrocall $name="$viewmacro$" to={{!!title}} string={{!!title}} abbr={{!!title}} mail={{!!title}} name={{!!title}} tag="$viewtag$" />
</$list>
<$button set="$:/temp/edit-field-$(currentTiddler)$-$field$" setTo=“yes” class=“tc-btn-invisible”>{{$:/core/images/edit-button}}</$button>
</$reveal>
<$reveal state="$:/temp/edit-field-$(currentTiddler)$-$field$" type=match text=“yes”>
<$edit-date field="$field$" tiddler="$(currentTiddler)$" />
<$button set="$:/temp/edit-field-$(currentTiddler)$-$field$" setTo=“no” class=“tc-btn-invisible”>{{$:/core/images/done-button}}</$button>
</$reveal>
\end


#4

Yep mais j’avais essayé ça sans succès :

Pour le bonus, je n’ai qu’un mot : merci ! :gift:

Exemple code :

<<showEditDate debut >> <<showEditDate fin >>

En image :

Reste plus que la correction du format de la date, et ça sera presque parfait :sunglasses:


#5

tu as oublié de fermer le widget:
<$edit-date field="debut"></$edit-date>
ou bien
<$edit-date field="debut" />


#6

Ah bah oui… C’est tout de suite mieux :blush:


#7

c’est fait :stuck_out_tongue:

comment ça “presque” ? :wink:


#8

Par exemple, jusqu’ici j’utilisais l’option format="DD/MM/YYYY" pour afficher une timeline, et ainsi saisir à la main dans les champs date début et fin au format jj/mm/aaaa, affichage plus classique en français.

Là, si j’essaye de mettre le même paramètre, chez moi ça bug dans le champ du datePicker (il ne sait pas si le jour et le mois et inversement en boucle). Avec des espaces c’est pareil.
En regardant la doc de Moment.js, je vois pas de format dd/mm/aaaa mais en effet dd-mm-aaaa, donc nous n’aurions pas le choix du rendu ? (bien qu’un point ça semble passer dd.mm.aaaa).

Bref je m’y prend sans doute mal, et donc je maîtrise pas l’aspect multilingue du plugin.

Sinon c’est pour l’instant quand même parfait en jonglant avec les deux plugins, ta macro et du ViewTemplate pour afficher par exemple un bouton play et stop en bas à droite d’un tiddler avec le tag qui va bien :innocent:

Le plus que parfait sera lorsque j’arriverai à ajouter un bouton en bas pour sélectionner la couleur du tiddler :birthday:
(je dois pouvoir m’inspirer de l’astuce de Tobias Beer : Adding A ColorPicker For Editing Images)


#9

ah c’est rigolo :stuck_out_tongue: j’avais pas testé ce cas

si tu n’utilises qu’un des deux attributs (format OU fieldFormat), ça semble bien se comporter.

utilises les lettrages comme en anglais: “DD/MM/YYYY”, même si la langue du TW5 est le français.

peux-tu créer un ticket sur github? je vais regarder ça de plus près plus tard


#10

En effet, dans la macro j’utilise ceci :

<$edit-date format=“DD.MM.YYYY” fieldFormat=“DD/MM/YYYY” field="$field$" tiddler="$(currentTiddler)$" />

Ainsi en affichage je conserve le format avec /

Voici un TW d’exemple depuis un TW tout neuf avec les modifications :

http://sylvain.naud.in/public/TiddlyWiki/TW_DatePickerTimeline.html

J’ouvrirai le ticket dans le week-end (ou deux, style comment mettre le lundi par défaut en premier à la place du dimanche).


#11

j’ai résolu le bug et j’ai ajouté l’option “firstDay” comme tu l’as proposé sur github.
je vais peut-être exposer plus d’options de Pikaday à l’avenir, surtout si j’ai des demandes. Personnellement je n’en ai pas besoin donc je ne suis pas pressé…


#12

Merci :blush:

Je voyais plus l’option au niveau du plugin d’une manière générale, plutôt qu’individuellement comme attribut. Bon même si dans mon exemple, j’utilise juste 2 macros, donc 2 modifications suffisent.

HowTo mis à jour : http://sylvain.naud.in/public/TiddlyWiki/TW_DatePickerTimeline.html


#13

Bonjour @kixam et merci pour le partage et pour le travail !

Petites questions:

  • Y a t’il un interet à avoir choisi un champ de texte plutot qu’une icone de calendrier par exemple ?
  • Si le champ/field du tiddler qui doit contenir la date est vide au départ y a t-il moyen d’utiliser un “placeholder” dans le widget afin de décrire à quoi sert de cliquer dessus ? (comme dans l’image ci dessous)
  • Y a t’il un moyen d’effacer la date sans avoir à éditer manuellement le tiddler ?

Grâce à toi je vais pouvoir facilement améliorer mon agenda et ma liste de tache à faire :smile:


#14

salut @Spangenhelm,

  • j’ai choisi un champ texte pour être homogène avec l’expérience TW5, notamment je me veux proche du widget $edit et ses dérivés. Cela permet également de voir la valeur du champ. Après on peut imaginer afficher d’autres choses…
  • bonne idée pour le placeholder, par contre aujourd’hui j’utilise les traductions de moment.js ce qui me rend compatible avec les langues de TW5. Si je veux intégrer un placeholder par défaut, je devrais générer mes propres textes… je n’ai pas les compétences pour traduire dans 18 langues !

=> pour les deux points ci-dessus, je peux proposer des options pour que l’utilisateur puisse afficher lui-même ce qu’il veut. Peux-tu ouvrir deux tickets sur github ?

  • aujourd’hui il n’est pas possible d’effacer la date via le widget. Mon datepicker est basé sur Pikaday, qui ne propose pas de telle fonction, même en option. Par contre, rien ne t’empêche d’accoler un bouton “maison” au widget, par exemple
<$edit-date tiddler="myTiddler" field="myField" />
<$button class=tc-btn-invisible>
<$action-deletefield $tiddler="myTiddler" $field="myField" />
{{$:/core/images/delete-button}}
</$button>

#15

@kixam merci pour tes réponses, je viens d’ouvrir un ticket pour le placeholder mais pour le premier je ne vois pas comment “formuler” le problème, peut-être:

Allow the user to use an icon instead of the text input ?

Ok pour le bouton pour effacer la date. Du coup si l’on voulait ajouter cette option en natif il faudrait que l’on ouvre un ticket sur pickaday mais une telle fonction n’est peut-être utile que dans tw ?


#16

@Spangenhelm,

Allow the user to use an icon instead of the text input

Tu peux mettre par exemple “Allow user to replace the default rendering tag by another tag”

En fait je pense qu’il faut permettre non pas seulement des images mais toute balise qui ne permet pas d’éditer le texte - y compris par exemple <p> pour pouvoir afficher la valeur sans pouvoir la modifier au clavier. Je vais voir jusqu’où on peut aller… Pikaday n’est pas prévu pour ce genre d’usage en tout cas

Ok pour le bouton pour effacer la date. Du coup si l’on voulait ajouter cette option en natif il faudrait que l’on ouvre un ticket sur pickaday mais une telle fonction n’est peut-être utile que dans tw ?

Concernant Pikaday, il a été conçu pour être lié à un <input> (ou produire son propre <input>), du coup pour “effacer” la date, l’utilisateur doit simplement effacer le texte dans le champ de saisie. Si on veut pouvoir effacer le texte par un clic de la souris ou autre, j’imagine que ça sort un peu du scope de Pikaday, qui est seulement de proposer un calendrier en popup, je pense que c’est donc du ressort de l’utilisateur…

… et on arrive dans le scope de ce forum :stuck_out_tongue: si le bouton que je t’ai proposé ne te convient pas, peux-tu me dire en quoi il ne te convient pas? que veux-tu faire et comment voudrais-tu le faire?


#17

Oki dooki c’est fait.

Lorsque je parlais d’effacer la date je parlais en fait de carrément supprimer le champ (si il est vide à quoi bon le garder) je réalise que je ne l’avais pas précisé dans mes réponses, du coup ton bouton me convient très bien j’aurais fait le même :smile:

++


#18

salut @Spangenhelm,

désolé pour l’attente, j’ai enfin trouvé le temps de m’occuper de tes demandes.

ma doc est pas très locace, donc je vais clarifier…

  • pour placeholder c’est assez évident je pense

  • pour répondre à ton autre demande, j’ai ajouté 2 attributs: tag et attributes. Ça permet d’être le plus générique possible. Dans ton cas tu pourrais utiliser par exemple <$edit-date tag=image attributes=A /> avec le tiddler A contenant par exemple {"src": "http://MonSite.com/MonImageEnLigne.jpg", "style": "width: 20px, height: 20px"}. N’oublies pas de changer le type du tiddler A : application/json.

cela répond-t-il à ton besoin ? Parce que si tu veux utiliser une image hébergée dans ton TW, il faut que je creuse un peu plus …


#19

Super pour le placeholder!

Hélas oui c’est à cela que je pensais (d’ailleurs je parlais plus d’icone que d’image, afin de l’intégrer à celles déjà présentes dans tw pour garder une homogénéité)

Par contre je pense que d’autres apprécieront alors merci pour eux :wink:
++


#20

OK je m’en doutais

Je m’en occupe dès que possible