comment ajouter des classes supplémentaires à un champ de date dans les vues?

7

J'utilise Drupal 7 . J'ai créé une vue, qui utilise un champ de date. Je voudrais créer des classes supplémentaires dans le champ de date pour cette vue spécifique.

Par exemple,

<div class="field-content">
 <span class="date">10</span>
 <span class="month">June</span>
 <span class="year">2011</span>
 <span class="time"> 8:00 </span>
</div>

Maintenant j'ai un code:

<div class="field-content">
 <span class="date-display-single">10 June 2011, 8:00</span>
</div>

Comment faire étape par étape?

7 theming datetime

3

Vous devez installer le module de jeton (la dernière version bêta inclut les jetons de champ) et le module de formateurs personnalisés à partir de http://drupal.org/project/custom_formatters .
Ensuite, activez-le depuis la page des modules.
Allez dans admin-> structure-> formateurs.
Ajoutez un nouveau formateur, mettez-lui un nom que vous aimez.
Format: HTML + jetons
Type de champ: Date

Formateur:

<span class="day">[node:source:field-datefieldname:custom:j]</span>
<span class="month">[node:source:field-datefieldname:custom:F]</span>
<span class="year">[node:source:field-datefieldname:custom:Y]</span>

sauver

Maintenant, vous avez créé un formateur de date personnalisé, que vous pouvez utiliser à votre vue!

— John
source

4

Vous pouvez le faire sans modules supplémentaires.

Ajoutez le champ de date. Excluez ceci de l'affichage. Choisissez personnalisé et écrivez d dans la case (comme dans la date php du jour). Modifiez les «Paramètres de style» - Personnaliser le champ HMTL (défini sur aucun) et Personnaliser le champ et le wrapper d'étiquettes HTML (défini sur aucun).
Ajoutez à nouveau le champ de date. Excluez-le également de l'affichage. Choisissez personnalisé et écrivez M dans la case (comme dans la date php du mois). Modifiez les «Paramètres de style» - Personnaliser le champ HMTL (défini sur aucun) et Personnaliser le champ et le wrapper d'étiquettes HTML (défini sur aucun).
Ajoutez à nouveau le champ de date. Excluez-le également de l'affichage. Choisissez personnalisé et écrivez Y dans la case (comme dans la date php pour l'année). Modifiez les «Paramètres de style» - Personnaliser le champ HMTL (défini sur aucun) et Personnaliser le champ et le wrapper d'étiquettes HTML (défini sur aucun).
Ajoutez à nouveau le champ de date (LAST TIME!). NE PAS EXCLURE CELA DE L'AFFICHAGE. Choisissez personnalisé et écrivez G: i (comme dans la date php pour les heures et les minutes). Modifiez les «Paramètres de style» - Personnaliser le champ HMTL (défini sur aucun) et Personnaliser le champ et le wrapper d'étiquettes HTML (défini sur aucun).

Réécrivez les résultats de ce champ de date finale. En utilisant les modèles de remplacement, vous pouvez ensuite écrire quelque chose comme ceci:

<div class="date">
  <span class="day">
    [created]
  </span>
  <span class="month">
    [created_1]
  </span>
  <span class="year">
    [created_2]
  </span>
</div>

Résultats de réécriture Drupal

— David Paul
source

1

Cela semble être une excellente méthode pour la date de création, mais il semble que vous ne pouvez pas sélectionner le "Format personnalisé" si vous utilisez un champ de module Date ajouté à un type de contenu?

— Mark

1

@Mark, si vous rencontrez ce problème, vous pouvez ajouter vos formats de date en utilisant / admin / config / regional / date-time, puis les étapes 1 à 3 vous sélectionnez le format approprié dans la liste déroulante au lieu de personnalisé.

— Webdrips

3

Une solution assez rapide (si vous pouvez écrire php), mais légèrement hackée serait de remplacer le modèle pour ce champ (voir Notions de base sur le thème des vues ), de traiter la valeur de date brute avec php pour retirer les pièces séparées, puis de les coller avec le code HTML de votre choix.

Alternativement, je pense que vous pourriez écrire un formateur de champ de date personnalisé ( voici quelqu'un qui l'a fait pour D6). Ce serait une bonne solution si vous souhaitez réutiliser le formateur personnalisé dans vos nœuds.

— marcvangend
source

1

Cela n'est pas possible à l'aide de l'interface utilisateur des vues. Vous auriez besoin d'un morceau de code assez complexe, et je serais curieux de connaître votre cas d'utilisation avant de vous encourager à vous lancer dans cette tâche.

Si vous demandiez comment ajouter des classes au champ dans son ensemble, la réponse serait quelque chose comme ceci:

Cliquez sur le champ dans l'interface Vues.
Développez le champ "Paramètres de style".
Cochez la case "Personnaliser le champ HTML", puis la case "Créer une classe CSS".
Entrez votre classe souhaitée.

Peut-être que cette solution sera suffisante. Sinon, je vous souhaite bonne chance.

— tim.plunkett
source

2

Merci pour la réponse, mais votre solution n'aide qu'à changer de classe pour tout le domaine, elle ne me permet pas de créer des pièces de date distinctes.

1

Ensuite, l'écriture d'un formateur personnalisé est probablement votre seule véritable option, au moment où la date arrive à la couche de thème, elle est complètement traitée, voir Fonction d'aide pour obtenir des données de champ brutes et rendues .

— tim.plunkett

1

C'est vraiment facile, (une fois que vous savez comment)

Utiliser un champ personnalisé de suite d'affichage

Allez dans admin / structure / ds / fields

(Dans le menu: Structure -> Display Suite -> Champs)

Cliquez sur ajouter un champ de code

Pour mon cas d'utilisation, j'ai entré ce qui suit

Étiquette

N'importe quoi

Entités

Nœud

Champ limite

Laissé vide

Code de champ

<div>
  <span class="mf-month">[node:created:custom:M]</span> 
  <span class="mf-day">[node:created:custom:d]</span>
</div>

Jeton

vérifié

Une fois le champ créé, accédez à la page d'affichage de gestion du type de contenu et du mode d'affichage que vous ajustez et sélectionnez le nouveau champ personnalisé.

Capture d'écran de la configuration ci-dessus

Capture d'écran de la page des paramètres

— chim
source