DataviewJS et Meta Bind pour les tâches Obsidian par date

Vue interactive des tâches Obsidian par date sélectionnée avec Meta Bind et DataviewJS

Meta Bind et DataviewJS permettent de créer une page avec un sélecteur de date interactif pour visualiser les tâches. En mode lecture, les utilisateurs cliquent sur un calendrier, choisissent une date — et la liste se met à jour automatiquement. Cette solution utilise des propriétés YAML comme stockage intermédiaire entre le widget d'entrée et le script de sortie.

Cela élimine l'édition manuelle des requêtes Tasks ou Dataview, où la date doit être modifiée dans le code à chaque fois.

Configuration : Installer les extensions et le bloc YAML

Installez les extensions Meta Bind et Dataview via les paramètres d'Obsidian. Dans Dataview, activez les requêtes JavaScript.

Créez un fichier, par exemple DynamicTasks.md, avec un bloc YAML :

---
selected-date: 2025-12-30
---

La valeur initiale sera écrasée par le widget.

Widget Meta Bind pour la sélection de date

Sous le YAML, insérez :

INPUT[datePicker: selected-date]

En mode lecture, un calendrier apparaît. Un clic ouvre un sélecteur de date, et la valeur est enregistrée dans selected-date.

Script DataviewJS : Filtrage et affichage des tâches

Après le widget, ajoutez un script pour rechercher les tâches :

const targetDate = dv.current().file.frontmatter["selected-date"];

const pages = dv.pages('"Work"')

.where(p => p.file.tasks

.where(t => !t.completed && t.due && t.due.toISODate() === targetDate)

.length > 0);

for (let page of pages) {

dv.el("div", dv.fileLink(page.file.path, false), {

attr: {

style: "display:inline-block; margin:8px 0 4px 0; padding:3px 8px; border-radius:6px; background:#e0f0ff; color:#0366d6; font-weight:500;"

}

});

dv.taskList(

page.file.tasks

.where(t => !t.completed && t.due && t.due.toISODate() === targetDate),

false

);

}

Explication du script

• Lecture de la date : dv.current().file.frontmatter["selected-date"] renvoie une chaîne AAAA-MM-JJ.

• Recherche des fichiers : dv.pages('"Work"') parcourt le dossier. Le filtre vérifie les tâches incomplètes avec due sur targetDate via .toISODate().

• Affichage : Pour chaque fichier — un badge avec lien et style CSS, puis dv.taskList sans regroupement (false). Remplacez "Work" par votre dossier.

Intégration dans un tableau de bord Canvas

Glissez le fichier sur un Canvas — Obsidian crée une carte interactive. Ajustez la taille. Travaillez directement sur le tableau de bord ou cliquez pour naviguer.

Prérequis et fonctionnalités

• Syntaxe des tâches : Utilisez l'emoji 📅 AAAA-MM-JJ pour due. Les cases à cocher sans date sont ignorées.

• Mises à jour : DataviewJS redémarre avec un délai d'environ 1 seconde après le changement de date.

Points clés

• Le datePicker interactif de Meta Bind met à jour le YAML sans édition manuelle.
• DataviewJS filtre les tâches par correspondance exacte due.toISODate() === targetDate.
• Regroupement par fichiers avec badges personnalisés pour le contrôle de l'interface.
• Affichage automatique dans Canvas sans extensions supplémentaires.
• Idéal pour vérifier la charge de travail sur des dates futures (vacances, réunions).

Avantages par rapport aux requêtes statiques

| Approche | Changer la date | Mode lecture | Mise à jour auto |

|----------|---------------|--------------|-------------|

| Tasks due on DATE | Manuel dans le code | Non | Non |

| Dataview due = date() | Manuel dans le code | Non | Non |

| YAML + Meta Bind + DataviewJS | Clic-calendrier | Oui | Oui |

La solution est évolutive : ajoutez des filtres pour les étiquettes ou statuts dans .where().

— Editorial Team