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

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?

1. 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 .

2. Ensuite, activez-le depuis la page des modules.

3. Allez dans admin-> structure-> formateurs.

4. Ajoutez un nouveau formateur, mettez-lui un nom que vous aimez.

5. Format: HTML + jetons

6. Type de champ: Date

7. 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>

8. sauver

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

Vous pouvez le faire sans modules supplémentaires.

1. 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).
2. 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).
3. 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).
4. 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).

5. 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>

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.

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:

1. Cliquez sur le champ dans l'interface Vues.

2. Développez le champ "Paramètres de style".

3. Cochez la case "Personnaliser le champ HTML", puis la case "Créer une classe CSS".

4. Entrez votre classe souhaitée.

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

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