Symfony 4 - Affichage de l'heure
chabinot
Messages postés
391
Statut
Membre
-
codeurh24 Messages postés 846 Statut Membre -
codeurh24 Messages postés 846 Statut Membre -
Bonjour,
Je débute avec le framework "Symfony 4",
comment puis-je afficher l'heure d'une façon simple dans un rendu de template Twig ?
Je m'explique :
1 - Script date.js :
2 - Page html :
Le résultat est bon, mais j'aimerais avoir la même chose dans un template twig de symfony.
Voilà ce que j'ai fait dans base.html.twig :
Comment coder en twig natif l'instruction "<span id="time"><script>window.onload=dspTime('time');</script></span>" ?
Cordialement,
Je débute avec le framework "Symfony 4",
comment puis-je afficher l'heure d'une façon simple dans un rendu de template Twig ?
Je m'explique :
1 - Script date.js :
/* Fonction Heure */
function dsptime(id) {
heure = document.getElementById(id);
date = new Date();
h = date.getHours();
m = date.getMinutes();
s = date.getSeconds();
hh = date.getHours();
h = h > 12 ? h % 12 : h;
heure.innerHTML = (h < 10 ? '0' : '') + h + ':' + (m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s + (hh < 12 ? ' am' : ' pm');
setTimeout('dsptime("' + id + '")', 1000);
return true;
}
2 - Page html :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test Time</title>
<script src="js/date.js"></script>
</head>
<body>
<h1><a href="/">Test Time</a></h1>
<p id="time"><script>window.onload=dsptime('time');</script></p>
</body>
</html>
Le résultat est bon, mais j'aimerais avoir la même chose dans un template twig de symfony.
Voilà ce que j'ai fait dans base.html.twig :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Boom Social NetWork{% endblock %}</title>
<!-- Typographie -->
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Raleway|Open+Sans|Roboto:100,300,400,500,700|Lato:300,400,700" rel="stylesheet">
<!-- Icones -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="border.ico" type="image/x-icon">
<!-- Syle CSS -->
<link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
<link rel="stylesheet" href="/css/main.css">
{% block stylesheets %}{% endblock %}
<!-- Scripts -->
<script src="/js/date.js"></script>
</head>
<body>
{% set route = app.request.attributes.get('_route') %}
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top italic">
<a class="navbar-brand" href="{{ path('home') }}">Boom Social Network</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
{% if app.user %}
<li class="nav-item {{ route == 'user' ? 'active' }}">
<a class="nav-link" href="{{ path('user') }}">Utilisateurs</a>
</li>
{% endif %}
<li class="nav-item {{ route == 'register' ? 'active' }}">
<a class="nav-link" href="{{ path('register') }}">Inscription</a>
</li>
{% if not app.user %}
<li class="nav-item {{ route == 'login' ? 'active' }}">
<a class="nav-link" href="{{ path('login') }}">Connexion</a>
</li>
{% else %}
<li class="nav-item {{ route == 'logout' ? 'active' }}">
<a class="nav-link" href="{{ path('logout') }}">Déconnexion</a>
</li>
{% endif %}
</ul>
</div>
</nav>
<div class="container">
{% block body %}{% endblock %}
</div>
<footer class="footer fixed-bottom italic">
<div class="row">
<div class="col-3 date">
{{ "now" | toDay }} {{ ' - Jour : ' ~ "now" | day }} {{ ' - Semaine : ' ~ "now" | week ~ ' || ' }}
<i class="fa fa-clock-o"></i> <span id="time"><script>window.onload=dspTime('time');</script></span>
</div>
<div class="col-6 text-center titre">
{{ '©' | raw }} {{ 'Copyright ' ~ "now" | year ~ ' - Boom Social NetWork. Tous droits Réservés.' }}
</div>
</div>
</footer>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
{% block javascripts %}{% endblock %}
</body>
</html>
Comment coder en twig natif l'instruction "<span id="time"><script>window.onload=dspTime('time');</script></span>" ?
Cordialement,
A voir également:
- Symfony 4 - Affichage de l'heure
- Code gta 4 ps4 - Guide
- Affichage double ecran - Guide
- Heure de connexion whatsapp qui ne changé pas - Accueil - WhatsApp
- Changement d'heure - Guide
- Windows 11 affichage classique - Guide
1 réponse
Bonjour.
Twig utilise le PHP il faut donc utilisé la fonction date en php.
Autre chose que tu as demandé d'adapter ton heure en js à twig.
J'ai donc mis le script en fin de page:
pour éviter un onload
pour respecter l'organisation dans le template.
et surtout pour que le html existe avant le script
date.js
twig
Twig utilise le PHP il faut donc utilisé la fonction date en php.
Autre chose que tu as demandé d'adapter ton heure en js à twig.
J'ai donc mis le script en fin de page:
pour éviter un onload
pour respecter l'organisation dans le template.
et surtout pour que le html existe avant le script
date.js
/* Fonction Heure */
function dsptime() {
var heure;
date = new Date();
h = date.getHours();
m = date.getMinutes();
s = date.getSeconds();
hh = date.getHours();
h = h > 12 ? h % 12 : h;
heure = (h < 10 ? '0' : '') + h + ':' + (m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s + (hh < 12 ? ' am' : ' pm');
document.querySelector('#time').innerHTML = heure;
return heure;
}
dsptime();
twig
<footer class="footer fixed-bottom italic">
<div class="row">
<div class="col-3 date">
{{ "now" | date('d') }} {{ ' - Jour : ' ~ "now" | date('D') }} {{ ' - Semaine : ' ~ "now" | date('W') ~ ' || ' }}
<i class="fa fa-clock-o"></i><span id="time"></span>
</div>
<div class="col-6 text-center titre">
{{ '©' | raw }} {{ 'Copyright ' ~ "now" | date("Y") ~ ' - Boom Social NetWork. Tous droits Réservés.' }}
</div>
</div>
</footer>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="/js/date.js"></script>
{% block javascripts %}{% endblock %}